在引导3

Question

垂直居中导航项目，因此，我已经把我的navbar到80px定制的高度，但现在让我的导航项目不垂直居中。我一直在寻找一个答案，将它们垂直居中放置一段时间，所以我想我会给StackOverflow一个镜头。

截图：http://screencast.com/t/zfUuX9SSQK

HTML：

<div class="container-fluid isModified"> 
    <div class="row"> 
     <nav class="navbar isModified" role="navigation"> 
      <div class="col-lg-8 col-lg-offset-2"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
         <span class="sr-only">Toggle Navigation</span> 
         <span class="icon-bar isModified"></span> 
         <span class="icon-bar isModified"></span> 
         <span class="icon-bar isModified"></span> 
        </button> 
        <a href="index.php" class="navbar-brand">Tickets</a> 
       </div> 

       <div class="collapse navbar-collapse" id="nav-collapse"> 
        <ul class="nav navbar-nav isModified"> 
         <li><a href="#">Link 1</a></li> 
         <li><a href="#">Link 2</a></li> 
         <li><a href="#">Link 3</a></li> 
        </ul> 
       </div> 
      </div> <!-- end col-lg-12 --> 
     </nav> 
    </div> <!-- end row --> 
</div> <!-- end container -->  

CSS：

.navbar.isModified { 
height: 80px; 
border-radius: 0; 
background-color: #cccccc; 

} 

.icon-bar.isModified { 
background-color: #fff; 

} 

Answer 1

垂直对齐可以以多种方式来完成，如图this Stack Overflow question。然而，他们的情况相当好，这意味着没有一种方法可以应用于每一种情况。

对于您所遇到的问题，我建议的line-height的方法，因为你所有的导航内容是在一行。只是删除任何垂直填充在问题中的元素，并将它们具有相同的line-height为所需容器高度（80px）：

.navbar-nav li a { 
    padding:0 15px; 
    line-height:80px;  
} 
.navbar-header a { 
    padding:0 15px; 
    line-height:80px;  
} 

这里有一个Bootply证明。希望这可以帮助！如果您有任何问题，请告诉我。

或者，你可以使用：

.navbar.isModified a { 
    padding:0 15px; 
    line-height:80px;  
} 

虽然你可能觉得这太宽泛一个CSS选择器，如果你打算在导航条造型等环节不同。

注意：如果您希望菜单的移动版本看起来没问题，则可能需要使用媒体查询以更多自己的方式覆盖这些样式。

Answer 2

您可以根据您的导航链接需要如何做人做到这一点的几种方法。您可能希望将行高应用于您的链接，以便将它们悬停在768px以上的导航栏的全部高度（或不是，取决于）。然后，您可以使用其他媒体并向navbar-header类添加填充以获得更高的导航栏。不要使用固定的高度，但因为移动你的拨动导航将没有任何背景颜色，因为导航栏有min-height: 50px默认值。

工作实例：

.navbar.isModified { 
 
    background-color: #cccccc; 
 
} 
 
.navbar.isModified .icon-bar { 
 
    background-color: #fff; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar.isModified .navbar-brand { 
 
    line-height: 50px; 
 
    } 
 
    .navbar.isModified .navbar-nav > li > a { 
 
    line-height: 50px; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar.isModified .navbar-header { 
 
    padding: 15px 0; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <nav class="navbar navbar-static-top isModified" role="navigation"> 
 
     <div class="col-lg-8 col-lg-offset-2"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
 
      <span class="sr-only">Toggle Navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a href="index.php" class="navbar-brand">Tickets</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="nav-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href="#">Link 1</a> 
 
      </li> 
 
      <li><a href="#">Link 2</a> 
 
      </li> 
 
      <li><a href="#">Link 3</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>