CSS 如何垂直居中导航栏元素（Twitter Bootstrap）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11408667/
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
How to center navbar elements vertically (Twitter Bootstrap)?
提问by X?pplI'-I0llwlg'I -
This is my CSS/LESS CSS code so far:
到目前为止，这是我的 CSS/LESS CSS 代码：
//make navbar taller
@navbarHeight: 60px;
//make navbar link text 18px
.navbar-inner {
font-size: 18px;
}
//make navbar brand text 36px
.navbar .brand {
font-size: 36px;
}
Which produces this:
产生这个：
FYI I'm using the Twitter Bootstrap demo code, I haven't altered the html (aside from changing the brand name).
仅供参考，我正在使用 Twitter Bootstrap 演示代码，我没有更改 html（除了更改品牌名称）。
As you can see, the brand name is centered vertically within the navbar like it should be, but the navigation links are not (they're bit higher towards the top). The problem only became apparent once I altered the height of the navbar. How can I get them to be centred vertically (like thiswebsite, for example)?
如您所见，品牌名称在导航栏中垂直居中，但导航链接并非如此（它们在顶部略高）。只有在我更改导航栏的高度后，问题才变得明显。我怎样才能让它们垂直居中（例如这个网站）？
If it's any help, highlighting the elements in Chrome shows this:
如果有任何帮助，突出显示 Chrome 中的元素会显示：
采纳答案by wisew
The .brandclass uses a different line-heightthan the base text that is used throughout Bootstrap, as well as a few other key differences.
该.brand班采用的是不同的line-height比在整个启动时使用的基础文本，以及其他一些关键的区别。
Relevant parts from the original bootstrap navbar LESS -
原始引导导航栏的相关部分 LESS -
For .brand:
对于.brand：
.brand {
// Vertically center the text given $navbarHeight
@elementHeight: 20px;
padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
font-size: 20px;
line-height: 1;
}
For links in the navbar:
对于导航栏中的链接：
.navbar .nav > li > a {
@elementHeight: 20px;
padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
line-height: 19px;
}
You'll probably need to play around with the values of @elementHeight, line-height, and maybe paddingfor the .navbar .nav > li > aselector to reflect the bigger 60px @navbarHeight(these default values are meant for a 40px @navbarHeight). Maybe try a 40px @elementHeightand/or a 29px line-height to start.
你可能需要摆弄的值@elementHeight，line-height以及可能padding的.navbar .nav > li > a选择，以反映较大的60像素@navbarHeight（这些默认值都是为了一个40像素@navbarHeight）。也许尝试 40px@elementHeight和/或 29px 行高开始。
回答by mattauckland
I've just had a similar issue with Bootstrap 3 but with the brand eliment. In the end I used the following css:
我刚刚在 Bootstrap 3 上遇到了类似的问题，但在品牌 eliment 上。最后我使用了以下css：
.navbar-brand {
font-size: 3em;
line-height: 1em;
}
My nav bar has increased in size due to a 50px image, with top and bottom margins of 10px. Not sure if that is of any help.
由于 50 像素的图像，我的导航栏的大小增加，顶部和底部边距为 10 像素。不知道这是否有帮助。
回答by Sllix
You can try this:
你可以试试这个：
display: table-cell;
display: table-cell;
回答by consprice
If the above answer doesn't help, and you haven't touch the html, the only thing I can think of is the css. You might want to look at the css which the bootstrap example used and modify the sizes of .navbar-innerand .navbar .brandaccordingly.
如果上面的答案没有帮助，并且您还没有接触 html，那么我唯一能想到的就是 css。你可能想看看它引导示例中使用和修改的大小的CSS.navbar-inner和.navbar .brand相应。
