在引導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>