css – 引导3:当徽标增加Navbar的高度时,垂直居中导航链接

前端之家收集整理的这篇文章主要介绍了css – 引导3:当徽标增加Navbar的高度时,垂直居中导航链接前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是新的引导框架,但即使在阅读所有的文档和所有现有的StackOverflow问题,我还是有点卡住。

徽标增加NavBar的高度:

在我的导航栏中,我插入了一个高度为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”链接

提前谢谢了!

解决方法

将它添加到您的样式表。 line-height应与您的徽标的高度相匹配
.navbar-nav li a {
 line-height: 50px;
}

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

原文链接:https://www.f2er.com/css/221443.html

猜你在找的CSS相关文章