Bootstrap 3：当徽标增加导航栏的高度时，导航链接垂直居中答案

【问题标题】：Bootstrap 3 : Vertically Center Navigation Links when Logo Increasing The Height of NavbarBootstrap 3：当徽标增加导航栏的高度时，导航链接垂直居中
【发布时间】：2013-11-19 14:34:29
【问题描述】：

我是引导框架的新手。

增加NavBar的Logo高度：

在我的导航栏中，我插入了一个高度为 50 像素的徽标。这显然使导航栏更高。我没有为此调整任何 CSS，它只是强制增加高度的徽标。

问题：

导航栏中的链接与现在更高的导航栏的顶部对齐。

目标：

我希望链接在导航栏中垂直居中，因为这样看起来会更好。

我的假设是使用行高值或填充。然而，这带来了仍然在移动浏览器上生效的问题（当它切换到切换菜单时），所以我的展开菜单最终太高了，看起来很傻。

非常感谢任何见解？

我的 CSS 是使用最新版本 3.0.2 下载的默认引导 CSS。

这是我的 HTML：

<!-- Begin NavBar -->
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".menu2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand" href="#"><img src="img/logo.png" width="210" height="50" alt="My Logo"></span>
    </div>


    <div class="navbar-collapse collapse menu2">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>

    </div><!--/.nav-collapse -->
  </div>
</div>

当我真的希望它们在中心垂直对齐时，正是那些“链接 1”、“链接 2”、“链接 3”和“链接 4”链接与顶部对齐。

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

将此添加到您的样式表中。 line-height 应该与你的 logo 的高度相匹配

.navbar-nav li a {
 line-height: 50px;
}

查看小提琴：http://jsfiddle.net/nD4tW/

【讨论】：

感谢@Matt Lambert 的建议。我也是这么想的。该方法的问题在于，当您在移动（小屏幕）设备上查看它时，line-height 参数会使下拉菜单导航变高。它最终看起来很奇怪。所以，在桌面端它可以工作，但是关于它如何在移动端也能很好地表现的任何想法？
是的，只需覆盖媒体查询中的 line-height 值，使其匹配正确的高度。认为应该可行
这就是我讨厌前端工作的原因。用了几个小时，解决方案就是这么简单。
嘿，它让我有工作:)
嘿，你们可以扩展媒体查询扩展吗？我已经把它放在我的样式表.navbar-nav li a { line-height: 50px; } @media (max-width: @screen-xs-max) { .navbar-nav li a { line-height: 50px; } } 中，但我不确定它为什么不起作用。

【解决方案2】：

马特的回答很好，但只是为了避免这种情况传播到导航栏中的其他元素（比如当你也有一个下拉菜单时），使用

.navbar-nav > li > a {
   line-height: 50px;
}

【讨论】：

【解决方案3】：

使用Bootstrap Customizer 生成具有更高导航栏的Bootstrap 版本。您要更改的值为Navbar section 中的@navbar-height。

检查您当前的实现，以查看您的导航栏与 50 像素品牌图像的高度，并在定制器中使用计算得出的高度。

【讨论】：

感谢@ssorallen 的建议。我希望只使用下载包的默认版本，然后对我的自定义 CSS 文件进行自定义。我遇到的另一个问题是我最终需要在页面上有 2 个导航菜单，其中一个很短，另一个很高（以容纳徽标）。所以，我真的需要知道要定位什么 CSS。

【解决方案4】：

Bootstrap 自动将导航栏的高度设置为 50 像素。链接上方和下方的填充设置为 15px。我认为引导程序正在为您的徽标添加填充。

您可以删除徽标上方和下方的一些填充，也可以在链接上方和下方添加更多填充。

添加更多的填充应该是这样的：

nav.navbar-inverse>li>a {
 padding-top: 25px;
 padding-bottom: 25px;
}

【讨论】：

【解决方案5】：

我发现您不一定需要将文本垂直居中，它在行的底部附近看起来也不错，只有当它位于顶部（或高于中心？）时它看起来不对。所以我用这个将链接推到了行的底部：

.navbar-brand {
    min-height: 80px;
}

@media (min-width: 768px) {
    #navbar-collapse {
        position: absolute;
        bottom: 0px;
        left: 250px;
    }
}

我的品牌形象是 SVG，我使用了height: 50px; width: auto，它的宽度约为 216 像素。它垂直溢出它的容器，所以我添加了min-height: 80px; 为它腾出空间，加上引导程序的 15px 边距。然后我调整了navbar-collapse 的left 设置，直到它看起来正确为止。

【讨论】：

【解决方案6】：

实际上，我最终得到了这样的结果，以允许导航栏折叠。

@media (min-width: 768px) { //set this to wherever the navbar collapse executes
  .navbar-nav > li > a{
    line-height: 7em; //set this height to the height of the logo.
  }
}

【讨论】：