如何垂直居中导航栏元素（Twitter Bootstrap）？

这是我的CSS/CSS LESS到目前为止代码：如何垂直居中导航栏元素（Twitter Bootstrap）？

//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; 
}

将会产生这样的：

enter image description here

仅供参考我使用Twitter的引导演示代码，我没有改变该HTML（除了改变品牌名称）。

正如您所看到的，品牌名称在导航栏中垂直居中，就像它应该是的一样，但导航链接却不是（它们朝上朝上）。一旦我改变了导航栏的高度，问题就会变得明显。我怎样才能让他们垂直居中（例如this网站）？

如果它的任何帮助，凸显镀铬元素表明这一点：

enter image description here

来源

2012-07-10 XåpplI' -I0llwlg' I -

将您的代码添加到http://www.jsfiddle.net – SVS 2012-07-10 07:42:04

.brand类使用与在整个Bootstrap中使用的基本文本不同的line-height以及一些其他关键区别。

从原来的引导导航栏相关部分LESS -

为.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; 
}

对于导航栏链接：

.navbar .nav > li > a { 
    @elementHeight: 20px; 
    padding: ((@navbarHeight - @elementHeight)/2 - 1) 10px ((@navbarHeight - @elementHeight)/2 + 1); 
    line-height: 19px; 
}

你可能需要玩的值为@elementHeight,line-height，也许padding为.navbar .nav > li > a select或反映较大的60px @navbarHeight（这些默认值是指40px @navbarHeight）。也许尝试一个40px的@elementHeight和/或一个29px线高度开始。

来源

2012-07-11 00:43:58 wisew

谢谢。操作'.navbar .nav> li> a'的'line-height'这样做（改变'@ elementHeight'似乎没有效果）。 – 2012-07-25 03:21:01

.brand本身不起作用。 Bootstrap的“.nav .brand”覆盖它。你必须插入“.nav .brand {”和跟随你的代码，那么只有它会覆盖引导程序的原始填充。 – 2012-12-07 10:23:07

我只使用线条高度，类似于我的标志高度。它运作良好:)谢谢 – drupality 2016-03-18 20:33:48

你可以试试这个：

display: table-cell;

来源

2012-07-10 08:27:11 Sllix

如果以上回答没有帮助，和你没有触及html，我唯一能想到的就是CSS。您可能需要查看bootstrap示例所使用的css，并相应地修改.navbar-inner和.navbar .brand的大小。

来源

2012-07-10 10:25:09 consprice

我刚刚与Bootstrap 3有类似的问题，但与品牌eliment。到底我用下面的CSS：

.navbar-brand { 
    font-size: 3em; 
    line-height: 1em; 
}

我的导航栏的大小由于图像50像素的增加，具有顶部和10px的底部边缘。不知道这是否有帮助。

来源

2014-02-18 01:52:41 mattauckland

如何垂直居中导航栏元素（Twitter Bootstrap）？

回答

相关问题