Question

我试图在div bootstrap容器中垂直居中文本。这是我的示例HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>
.vcenter {
 display: inline-block;
 vertical-align: middle;
 float:none;
}
</style>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-default vcenter ">

    <ul class="list-inline vcenter" >
   <li class="menuFont"><a href="/">Menu 1</a></li>
   <li class="menuFont "><a href="/Menu 2">Menu 2</a></li>
   <li class="menuFont "><a href="/Menu 2">Menu 3</a></li>
   <li class="menuFont "><a href="/Menu 2">Menu 4</a></li>
   <li class="menuFont "><a href="/Menu 2">Menu 5</a></li>
   <li class="menuFont "><a href="/Menu 2">Menu 6</a></li>
  <li class="menuFont "><a href="/Menu 2">Menu 7</a></li>
  </ul>
</nav>
</div>
 </body>
</html>

我希望菜单文本在容器内垂直居中，但它们正在顶部。我该怎么做？

我昨晚做了这个，这就是我想出的：

我使用Bootstrap的目标是在页面上水平运行一系列菜单链接。出于某种原因，无疑由于我的无知，这被证明是相当困难的。我确实想出了一个解决方案。至少这似乎有效，好吧。但是，为了使水平菜单项在容器中垂直居中显示，我必须将margin-top：3px添加到类视图中。这对我来说有点假，但无论什么作品都有效，我猜。任何评论都表示赞赏。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">   </script>

<style>
.view {
   margin-left: auto;
   margin-right: auto;
   overflow: hidden;
   margin-top: 3px;
} 
</style>
</head>
<body>
    <div class="container">
       <div class="Jumbotron">
           <h1 class="text-primary text-center">Using Bookstreap.js</h1>
           <hr>
        </div>
        <nav class="navbar navbar-default view ">
             <div class="container-fluid view">
           <div class="row">
           <div class="col-lg-10 col-lg-offset-10 view" >
             <ul class="list-inline view"  >
               <li class="view"><a href="/">Menu 1</a></li>
               <li class="view"><a href="/Menu1">Menu 1</a></li>
               <li class="view"><a href="/Menu1">Menu 2</a></li></li>
               <li class="view"><a href="/Menu1">Menu 3</a></li>
               <li class="view"><a href="/Menu1">Menu 4</a></li>
               <li class="view"><a href="/Menu1">Menu 5</a></li>
               <li class="view"><a href="/Menu1">Menu 6</a></li>
             </ul>
           </div>
         </div>
       </div>
      </nav>
  <div>

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>
{ 
 display: inline-block;
 vertical-align: middle;
 float:none;



}
</style>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-default vcenter "  >
      <div class="container-fluid vcenter">
        <div class="col-lg-5 col-lg-offset-5" >
    <ul class="list-inline vcenter" >

    <div>

   <li class="menuFont"><a href="/">Menu 1</a></li>
   <li class="menuFont "><a href="/Menu 2">Menu 2</a></li>
   <li class="menuFont "><a href="/Menu 2">Menu 3</a></li>
   <li class="menuFont "><a href="/Menu 2">Menu 4</a></li>
   <li class="menuFont "><a href="/Menu 2">Menu 5</a></li>
   <li class="menuFont "><a href="/Menu 2">Menu 6</a></li>
  <li class="menuFont "><a href="/Menu 2">Menu 7</a></li>
  <div>
  </ul>
  </div>


</div>
</nav>
</div>
 </body>
</html>

如何在引导容器中垂直居中文本

1 个答案: