在 Bootstrap 列表中垂直居中文本答案

【问题标题】：Centering text vertically in Bootstrap list在 Bootstrap 列表中垂直居中文本
【发布时间】：2016-02-05 02:11:17
【问题描述】：

所以我正在创建这个网站，它有一个顶部导航菜单、一个左侧导航菜单和一个主要内容容器，所有这些都是用引导程序制作的。问题是，我无法让顶部导航菜单和左侧导航菜单中的文本垂直居中。我假设两者都有相同的问题，所以我将只显示左侧菜单的代码：

HTML：

<div class="row">
    <div class="col-md-3 z-overview-left-menu">
        <ul class="z-left-list">
            <li class="z-left-list-item"><span class="z-test">One</span></li>
            <li class="z-left-list-item z-selected">Two</li>
            <li class="z-left-list-item">Three</li>
        </ul>
    </div>
    <div class="col-md-9 z-overview-main-menu">

    </div>
</div>

CSS：

.z-selected {
    background-color: rgb(255, 216, 0);
}

.z-left-list {
    vertical-align: middle;
    padding-left: 0;
    list-style: none;
}

.z-left-list-item {
    display: block;
    vertical-align: middle;
    height: 7%;
    font-size: 150%;
    border-bottom: 1px solid black;
}

简化的 Jsfiddle：Jsfiddle

那我做错了什么？我已经尝试将 display: table 添加到 z-left-list 并将 display: table-cell 添加到 z-left-list-item 类。

【问题讨论】：

请提供jsfiddle
@alirezasafian jsfiddle 提供。
如果这是一个导航菜单，使用 Bootstrap，你为什么不使用导航栏类？
我是 bootstrap 新手，我去看看。
我发布了一个答案，其中包含指向 Bootstrap 导航栏类说明的链接。请注意，我很确定导航栏类会做一些事情，比如在小屏幕上折叠成汉堡包图标。如果您要对移动设备友好，则需要该功能。

标签： html css twitter-bootstrap list html-table

【解决方案1】：

试试这样的：

<div class="z-overview-left-menu">
    <ul class="z-left-list">
        <li class="z-left-list-item"><span class="z-test">One asdfasd fasd fasdf asdf asdf</span></li>
        <li class="z-left-list-item z-selected"><span>Two</span></li>
        <li class="z-left-list-item"><span>Three</span></li>
    </ul>
</div>

.z-left-list {
    padding-left: 0;
    list-style: none;
}

.z-left-list-item {
    width:100%;
    display: table;
    vertical-align: middle;
    height: 60px;
    font-size: 150%;
    border-bottom: 1px solid black;
}
.z-left-list-item span {
    display:table-cell;
    vertical-align:middle;
}

https://jsfiddle.net/fekfrwoz/7/

【讨论】：

抱歉，您正在处理左侧菜单，我误会了它。立即查看jsfiddle.net/fekfrwoz/7

【解决方案2】：

我强烈建议您使用导航栏类。见here。这将使您的代码更易于维护，并将利用 Bootstrap 完成的大量 jscript 编码来使这些导航栏工作。例如，在移动屏幕上，导航栏将折叠成汉堡图标（三个堆叠的水平条，为您提供下拉菜单）。在我最新的网络应用程序中，我有两个导航栏（尽管位置与您描述的不同），而且效果很好。

【讨论】：

我会进一步调查
另外，如果您使用的是 Bootstrap，我猜您正在尝试对移动设备友好（现在几乎是 Web 应用程序的要求）。为此，我建议不要在左侧设置菜单。您可以将导航栏固定在顶部并带有额外的下拉菜单，或者一个固定的导航栏和一个在其下方随页面滚动的导航栏，或者两个相互堆叠的固定导航栏（如 CNN.com）。但是您不希望在菜单上吃掉宝贵的水平屏幕真实状态，并迫使移动设备上的用户横向滚动和上下滚动。

【解决方案3】：

如果您知道您的列表项只有一行文本，您可以随时将 line-height 添加到 .z-left-list-item 类定义中。

https://jsfiddle.net/fekfrwoz/1/

【讨论】：

问题是我的身高是百分比，然后就不行了。
啊，明白了。在你的问题中我没有注意到这一点。我会把这个留给未来的访客，但其他答案也应该提供一些替代方案。

【解决方案4】：

您可以删除 .z-left-list-item 的高度并在 li 的顶部和底部使用填充，如下所示：

padding: 35px 0;

哪个会模仿他们在 li 的中心？

【讨论】：

我希望它具有响应性，因此当屏幕高度发生变化时，硬编码的值将不再正确