19

到目前为止，这是我的 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 中的元素会显示：

在此处输入图像描述

4

4 回答 4

7

该类.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选择器来反映更大的 60px @navbarHeight（这些默认值适用于 40px @navbarHeight）。也许尝试 40px@elementHeight和/或 29px 行高开始。

于 2012-07-11T00:43:58.870 回答
0

如果上面的答案没有帮助，而且你还没有接触过 html，那么我唯一能想到的就是 css。您可能想查看引导示例使用的 css 并相应地修改其.navbar-inner大小.navbar .brand。

于 2012-07-10T10:25:09.740 回答
0

我刚刚在 Bootstrap 3 上遇到了类似的问题，但在品牌元素方面。最后我使用了以下css：

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

由于 50 像素的图像，我的导航栏的大小增加了，顶部和底部边距为 10 像素。不确定这是否有帮助。

于 2014-02-18T01:52:41.747 回答
0

你可以试试这个：

display: table-cell;

于 2012-07-10T08:27:11.543 回答