Twitter Bootstrap 3 中导航栏内的元素如何垂直居中？答案

【问题标题】：How are the elements inside the navbar centered vertically in Twitter Bootstrap 3?Twitter Bootstrap 3 中导航栏内的元素如何垂直居中？
【发布时间】：2013-11-22 14:50:45
【问题描述】：

我正在查看 Twitter Bootstrap 中的导航栏元素，以了解它们如何垂直居中导航栏中的元素，因为这是我一直在努力解决的问题。

我总是不得不求助于“随机”边距/填充值，我被告知它们不好，因为它们是仅在特定上下文中有效的神奇数字。

令人惊讶的是，我无法发现任何真正垂直居中元素的东西 - 没有 line-height 诡计或任何真正的东西，没有 display: table-cell。
.navbar-brand 类有一个 line-height 的 20px （就像 .navbar-nav 中的链接）和一个 padding 的 15px ，但它是如何居中的呢？他们是怎么做到的？

这里可以看到导航栏的代码：http://getbootstrap.com/components/#navbar

【问题讨论】：

请链接到示例
你在看哪个导航栏？看起来它同时具有顶部和底部填充 - github.com/twbs/bootstrap/blob/master/less/navbar.less#L249
@Sébastien 我添加了一个链接，请查看我的编辑。
@Wex 我正在查看我刚刚链接的导航栏。有趣的是，Firebug 没有显示任何填充，很奇怪。

标签： html css twitter-bootstrap twitter-bootstrap-3 vertical-alignment

【解决方案1】：

导航栏使用顶部和底部填充使文本垂直居中：

padding-top: 15px;
padding-bottom: 15px;

【讨论】：

【解决方案2】：

它们不会垂直居中文本。

我通过在 Chrome 中使用 inspect:element 向导航栏元素添加文本来测试这一点。然后我以同样的方式强制宽度。文本换行到下一行。所有行都在顶部排列，而不是居中。

【讨论】：