引导导航栏中的中心文本

Question

我知道有很多关于垂直对齐主题的帖子，但我仍然遇到一些问题。我有一个导航栏，我已将高度从默认更改为 64 像素。里面的所有东西也都调整到那个高度。我有一些如下所示的下拉菜单：

<ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Sample Text <span class="caret"></span>
        </a>
        <div class="dropdown-menu>
            <h6>Text</h6>
            <ul>
                <!--some li elements-->
            </ul>
        </div>
    </li>
    <!--some more li elements-->
</ul>

我遇到的问题是，虽然顶级 ul 的 a 元素 li 具有导航栏的高度并且内容框垂直居中（顶部和底部相等），但其中的文本不是在包含它的框中居中。相反，它被推到左上角（不是 a 元素，而是包含它在填充内的盒子）。我已经用 chrome 开发者工具验证了这一点。我想知道为什么文本没有垂直居中以及如何才能做到这一点。

编辑：https://jsfiddle.net/z4c1atdz/ 无论出于何种原因，下拉菜单都无法正常工作，但这对于我的问题而言并不重要。

编辑 2： 绿色是 a 元素的填充。 a 元素的文本位于蓝色框的顶部，我希望它与蓝色框垂直居中。

Answer 1

您是否尝试过为 a 标签添加更多高度？像这样？

.navbar-brand {
float: left;
height: 62px;
padding: 21px 17px;
font-size: 18px;
line-height: 20px;
}

https://jsfiddle.net/z4c1atdz/11/ 像这样。

Answer 2

您需要为导航栏中的元素添加填充以匹配新的高度，而不是仅仅改变它们的高度。

如果您使用预处理器，请更改导航栏高度的高度变量。填充将自动计算。

如果您使用纯 CSS，则需要手动向元素添加额外的填充以匹配新高度。基本上：

( navbar height - element height ) / 2

作为一个例子，你可以看到从 bootstrap 的源代码中提取的 sass mixin (_nav-vertical-align.scss mixin)。

// Navbar vertical align
//
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.

@mixin navbar-vertical-align($element-height) {
    margin-top: (($navbar-height - $element-height) / 2);
    margin-bottom: (($navbar-height - $element-height) / 2);
}

这用于导航栏按钮等...