Html 在导航栏中居中显示文本

我知道有很多关于垂直对齐的帖子，但是我仍然有一些问题。我有一个导航栏，我把它的高度从默认值改为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>

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

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

就像这样。
您需要为导航栏内的元素添加填充，以匹配新高度，而不仅仅是更改它们的高度

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

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

( navbar height - element height ) / 2

例如，您可以看到从引导程序的源（_nav-vertical-align.scss mixin）提取的sass mixin

这用于导航栏按钮等。
将您的代码放在JSFIDLE中，以便任何人都可以使用它。他们eric，您的问题仍然不清楚：（小提琴或钢笔怎么样；）我添加了小提琴。我应该提到的是，当我说box时，我指的是css box模型的最内部部分（填充中的部分），如果这有帮助的话。是的，在小提琴中，最后一条css规则将高度设置为64px。填充会使标记li的内容框居中，但标记的内容不会在保存标记内容的框中居中。我不知道box这个词是否适合我所描述的。我试图描述css框模型，即填充中最里面的部分。你能上传一张你想要实现的图像吗？元素已经有导航栏的高度，填充使元素在导航栏内垂直居中，这不是问题。问题是，如果你看图片，文本不是垂直居中的蓝色框。蓝色框包含元素的内容，周围的绿色框是元素的填充。是的，这是因为您正在设置元素的高度，所以应该保留元素的默认高度并更改其填充。如果在设置高度的元素中有文本，则文本将位于顶部，除非使用flex box。。。如果注意到引导，请使用填充或边距将导航栏内的元素居中
// 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);
}