如何垂直居中导航元素(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(除了更改品牌名称).

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

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

Answer 1

该.brand班采用的是不同的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选择,以反映较大的60像素@navbarHeight(这些默认值都是为了一个40像素@navbarHeight).也许尝试40px @elementHeight和/或29px线高开始.