bootstrap3怎么当标识增加导航栏的高度时垂直居中导航链接?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (39)

我是bootstrap框架的新手,但即使在阅读所有文档后,我仍然卡住。

NavBar标志越来越高:

在我的导航栏中,我插入了一个高度为50px的徽标。这显然使得导航栏更高。我没有为此调整任何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>
提问于
用户回答回答于

将其添加到样式表中。行高应该与徽标的高度相匹配

.navbar-nav li a {
 line-height: 50px;
}
用户回答回答于

只是为了避免这种情况传播到导航栏内的其他元素,使用

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

扫码关注云+社区

领取腾讯云代金券