在引导菜单中垂直对齐

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/