Bootstrap 3:当徽标增加导航栏高度时垂直居中导航链接 [英] Bootstrap 3 : Vertically Center Navigation Links when Logo Increasing The Height of Navbar

问题描述

我是 Bootstrap 框架的新手.

标志增加导航栏高度:

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

问题:

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

目标:

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

<小时>

我的假设是使用行高值或填充.然而，这引入了在移动浏览器上仍然有效的问题(当它切换到切换菜单时)所以我的扩展菜单最终太高了，看起来很傻.

非常感谢任何见解?

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

这是我的 HTML:

<div class="navbar navbar-inverse navbar-static-top" role="navigation"><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".menu2"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="navbar-brand" href="#"><img src="img/logo.png" width="210" height="50" alt="我的标志"></跨度>

<div class="navbar-collapse collapse menu2"><ul class="nav navbar-nav navbar-right"><li><a href="#">链接 1</a></li><li><a href="#">链接 2</a></li><li><a href="#">链接 3</a></li><li><a href="#">链接 4</a></li></div><!--/.nav-collapse -->

正是那些链接 1"、链接 2"、链接 3"和链接 4"链接在顶部对齐，而我真的希望它们在中心垂直对齐.

解决方案

将此添加到您的样式表中.行高应与徽标的高度相匹配

.navbar-nav li a {行高:50px；}

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

I'm new to the bootstrap framework.

Logo Increasing Height of NavBar:

In my navigation bar, I have inserted a logo that has a height of 50px. This obviously makes the navbar taller. I have not adjusted any CSS for this, it is simply the logo that is forcing the increased height.

Problem:

The links in the navbar are aligned to the top of the now taller navbar.

Goal:

I'd like the links vertically centered in the navbar as that will look much better.

---

My assumption was to play with line-height values or padding. However, that introduced the problem of still taking effect on mobile browsers (when it switches to the toggle menu) so my expanded menu ends up being way too tall that it looked silly.

Any insight is greatly appreciated?

My CSS is the default bootstrap CSS downloaded with the latest version 3.0.2.

Here is my 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>

It is those "Link 1", "Link 2", "Link 3" and "Link 4" links that are aligning to the top, when I really want them to be aligned vertically in the center.

解决方案

add this to your stylesheet. line-height should match the height of your logo

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

Check out the fiddle at: http://jsfiddle.net/nD4tW/

这篇关于Bootstrap 3:当徽标增加导航栏高度时垂直居中导航链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！