css – 如何垂直居中的navbar元素(Twitter Bootstrap)？

这是我的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中突出显示元素：

解决方法

.brand类使用与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的值，并可能需要播放.navbar .nav>的填充值。 li>一个选择器来反映较大的60px @navbarHeight(这些默认值适用于40px @navbarHeight)。也许尝试一个40px @elementHeight和/或29px的行高开始。