css - Bootstrap 菜单中的垂直对齐

Question

.navbar容器上的高度，因为那是菜单不再垂直。 display:inline-block 对我不起作用。必须有一个解决方案而不给菜单填充来修复它。

如何让菜单垂直对齐到 .navbar 容器中？我使用 bootstrap 作为框架

<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/