在引導菜單中垂直對齊

Question

.navbar容器的高度，因爲這是菜單不再垂直。 display:inline-block沒有爲我工作。必須有一個解決方案，而不用菜單填充來解決它。

如何將菜單垂直對齊到.navbar容器中？使用引導作爲框架

<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <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="#" class="navbar-brand">Brand</a> 
    </div> 
    <!-- Collection of nav links and other content for toggling --> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Profile</a></li> 
      <li><a href="#">Messages</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Login</a></li> 
     </ul> 
    </div> 
</div> 

Jsfiddle

.navbar{background-image: linear-gradient(90deg, #bed970, #54c1b5);background-size: 100% 4px;background-position: 0 0;background-repeat: no-repeat;-webkit-box-shadow: 0 0 4px #c8cacc;box-shadow: 0 0 4px #c8cacc;border: none;font-size: 14px;min-height: 70px;} 

Answer 1

假設你要保持你的70像素高度，你可以添加填充到頂部最簡單的解決方案是根據上面的CodeRomeos註釋更改行高。

.navbar-brand, .navbar-nav li a { 
line-height: 40px; 
} 

https://jsfiddle.net/hnyadr4s/1/

Answer 2

問題IM似乎是最小高度被設置爲70像素的.nav元素

如果添加上以下css

.navbar{min-height:inherit;} 

那麼它應該是確定

https://jsfiddle.net/ogvs98LL/

，或者如果你想保持高度

https://jsfiddle.net/pfjL9jy6/