如何中心导航栏垂直元素（Twitter的引导）？(How to center navbar elem

这是我的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的引导演示代码，我没有改变的HTML（除了改变品牌名称）。

正如你所看到的，名牌是导航栏内垂直居中像它应该是，但导航链接是不是（他们是朝最高位更高）。 这个问题只有一次我改变了导航栏的高度变得明显。 我怎样才能让他们垂直居中（像这样的网站，例如）？

如果它的任何帮助，凸显在Chrome中的元素表明这一点：

Answer 1:

的.brand类使用不同的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选择，以反映较大的60像素@navbarHeight （这些默认值都是为了一个40像素@navbarHeight ）。 也许尝试一个40像素@elementHeight和/或29px的line-height启动。

Answer 2:

如果上述答案没有帮助，而你还没有接触到HTML，我能想到的唯一的事情是CSS。 你可能想看看它使用的引导例如CSS和修改的尺寸.navbar-inner和.navbar .brand相应。

Answer 3:

你可以试试这个：

display: table-cell;

Answer 4:

我刚刚与引导3，但与品牌eliment类似的问题。 最后，我用下面的CSS：

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

我的导航栏已尺寸由于50像素的图像增加，顶部和10px的底部边距。 不知道如果这是任何帮助。

文章来源: How to center navbar elements vertically (Twitter Bootstrap)?