Question

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

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

Simplified Jsfiddle：Jsfiddle

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

Answer 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>

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

Answer 2

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

Answer 3

如果您知道列表项只包含一行文字，则可以随时将(defun gn-batch-search (key-name) "Execute a keyboard macro that has already been loaded." (interactive "sName of macro key:") (execute-kbd-macro key-name))添加到line-height类定义中。

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

Answer 4

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

padding: 35px 0;

哪会模仿他们在李的中心？

在Bootstrap列表中垂直居中文本

4 个答案: