Question

我知道关于垂直对齐的主题有很多帖子，但我仍然遇到一些问题。我有一个导航栏，我将高度从默认值更改为64px。其中的所有内容也会调整到该高度。我有一些下拉菜单，如下所示：

<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的元素li具有导航栏的高度，但内容的框是垂直居中的（顶部和底部填充相等），其中的文本不在包含它的框中居中。相反，它被推入左上角（不是一个元素，而是在填充内包含它的盒子）。我已经使用chrome开发人员工具对此进行了验证。我想知道为什么文本不是垂直居中的，我怎么能这样做。

编辑：https://jsfiddle.net/z4c1atdz/无论出于什么原因，下拉菜单都没有在小提琴中工作，但这对我的问题来说并不重要。

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

Answer 1

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

.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);
}

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

boostrap导航栏中的中心文本

2 个答案: