如何垂直居中导航栏元素（Twitter Bootstrap）？

Posted 2023-03-05

【中文标题】如何垂直居中导航栏元素（Twitter Bootstrap）？

【英文标题】：How to center navbar elements vertically (Twitter Bootstrap)?

【发布时间】：2012-07-09 15:43:30

【问题描述】：

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

【问题讨论】：

将您的代码添加到jsfiddle.net

【参考方案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 行高开始。

【讨论】：

谢谢。操纵.navbar .nav > li > a 的line-height 就成功了（更改@elementHeight 似乎没有效果）。

.brand 单独不起作用。 Bootstrap 的“.nav .brand”会覆盖它。必须插入“.nav .brand”并遵循您的代码，然后它才会覆盖引导程序的原始填充。

我只使用行高，类似于我的徽标高度。效果很好:) 谢谢

【参考方案2】：

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

【参考方案3】：

你可以试试这个：

display: table-cell;

【参考方案4】：

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

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

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