css - 如何垂直居中导航栏元素(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 选择器以反射(reflect)更大的 60px @navbarHeight(这些默认值适用于 40px @navbarHeight)。也许尝试 40px @elementHeight 和/或 29px 行高开始。