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

Question

到目前为止，这是我的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;
}

产生这个：

仅供参考我正在使用Twitter Bootstrap演示代码，我没有更改html（除了更改品牌名称）。

正如您所看到的，品牌名称在导航栏中垂直居中，就像它应该的那样，但导航链接不是（它们位于顶部稍高）。一旦我改变了导航栏的高度，问题就变得明显了。如何让它们垂直居中（例如this网站）？

如果有任何帮助，突出显示Chrome中的元素会显示：

Answer 1

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

原始bootstrap导航栏中的相关部分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值来反映更大的60px {{1 （这些默认值适用于40px @navbarHeight）。也许尝试40px @navbarHeight和/或29px行高开始。

Answer 2

你可以试试这个：

display: table-cell;

Answer 3

如果上面的答案没有帮助，而你没有触及html，我唯一能想到的就是css。您可能希望查看引导程序示例使用的css，并相应地修改.navbar-inner和.navbar .brand的大小。

Answer 4

我刚刚与Bootstrap 3有类似的问题，但有品牌效应。最后我使用了以下css：

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

由于50px图像，我的导航栏尺寸增加，顶部和底部边距为10px。不确定这是否有任何帮助。