html - 在 Bootstrap 列表中垂直居中文本

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

简化的 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>

.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/