CSS Bootstrap 3：当徽标增加导航栏高度时垂直居中导航链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19844561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 : Vertically Center Navigation Links when Logo Increasing The Height of Navbar
提问by Robert Scott
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.
在我的导航栏中，我插入了一个高度为 50 像素的徽标。这显然使导航栏更高。我没有为此调整任何 CSS，它只是强制增加高度的标志。
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.
我的 CSS 是使用最新版本 3.0.2 下载的默认引导 CSS。
Here is my HTML:
这是我的 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.
正是那些“链接 1”、“链接 2”、“链接 3”和“链接 4”链接与顶部对齐，而我真的希望它们在中心垂直对齐。
回答by Matt Lambert
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/
查看小提琴：http: //jsfiddle.net/nD4tW/
回答by Gabriel Udrea
Matt's answer is fine, but just to avoid this to propagate to other elements inside the navbar (like when you also have a dropdown), use
马特的回答很好，但只是为了避免这种情况传播到导航栏中的其他元素（比如当你也有下拉菜单时），使用
.navbar-nav > li > a {
line-height: 50px;
}
回答by Ross Allen
Use the Bootstrap Customizerto generate a version of Bootstrap that has a taller navbar. The value you want to change is @navbar-heightin the Navbar section.
使用Bootstrap 定制器生成具有更高导航栏的 Bootstrap 版本。您要更改的值@navbar-height位于Navbar 部分。
Inspect your current implementation to see how tall your navbar is with the 50px brand image, and use that calculated height in the Customizer.
检查您当前的实现以查看您的导航栏与 50 像素品牌图像的高度，并在定制器中使用该计算的高度。
回答by spasticninja
Bootstrap sets the height of the navbar automatically to 50px. The padding above and below links is set to 15px. I think that bootstrap is adding padding to your logo.
Bootstrap 自动将导航栏的高度设置为 50px。链接上方和下方的填充设置为 15px。我认为引导程序正在为您的徽标添加填充。
You can either remove some of the padding above and below your logo or you can add more padding above and below links.
您可以删除徽标上方和下方的一些填充，也可以在链接上方和下方添加更多填充。
Adding more padding should look something like this:
添加更多填充应该是这样的：
nav.navbar-inverse>li>a {
padding-top: 25px;
padding-bottom: 25px;
}
回答by realh
I found that you don't necessarily need the text vertically centred, it also looks good near the bottom of the row, it's only when it's at the top (or above centre?) that it looks wrong. So I went with this to push the links to the bottom of the row:
我发现您不一定需要垂直居中的文本，它在行底部附近看起来也不错，只有当它位于顶部（或中心上方？）时才看起来不对。所以我用这个把链接推到了行的底部：
.navbar-brand {
min-height: 80px;
}
@media (min-width: 768px) {
#navbar-collapse {
position: absolute;
bottom: 0px;
left: 250px;
}
}
My brand image is SVG and I used height: 50px; width: autowhich makes it about 216px wide. It spilled out of its container vertically so I added the min-height: 80px;to make room for it plus bootstrap's 15px margins. Then I tweaked the navbar-collapse's leftsetting until it looked right.
我的品牌形象是 SVG，我使用height: 50px; width: auto它使它大约 216px 宽。它垂直地从容器中溢出，所以我添加了min-height: 80px;为它腾出空间以及引导程序的 15px 边距。然后我调整了navbar-collapse'sleft设置，直到它看起来正确。
回答by Eric
I actually ended up with something like this to allow for the navbar collapse.
我实际上最终得到了这样的东西，以允许导航栏崩溃。
@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.
}
}
