[英]Bootstrap vertical centering in navbar issue
I have a standard bootstrap 3 navbar that I'm trying to center a larger-than-the-navbar logo, as well as the menu. 我有一个标准的bootstrap 3导航栏,试图将大于导航栏的徽标以及菜单居中。 I've tried a lot of previous related SO questions, but can't find a solution that works.
我已经尝试了很多先前相关的SO问题,但是找不到有效的解决方案。
I'm currently trying to give both an equal padding to make them vertically centered, and I've also tried giving the menu items a line-height, but that doesn't work as well. 我目前正在尝试给两者均等的填充,以使它们垂直居中,并且我还尝试为菜单项设置行高,但这并不奏效。
Heres't what I'm currently doing: 这不是我目前正在做的事情:
.navbar-brand,
.nav {
padding: 20px 0;
}
Here's my code: https://jsfiddle.net/rhfhq33s/ 这是我的代码: https : //jsfiddle.net/rhfhq33s/
You need to set line-height
directly to anchor: 您需要直接将
line-height
设置为锚点:
@media (min-width: 768px) {
#menu-primary > li > a { line-height: 95px; }
}
I used also media rule, because i guess you don't need that line-height
when menu is collapsed. 我还使用了媒体规则,因为我想当折叠菜单时您不需要该
line-height
。
https://jsfiddle.net/rhfhq33s/2/ https://jsfiddle.net/rhfhq33s/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.