html - 将 span 文本定位在 li 元素的中间(垂直和水平)

Question

如何定位跨度文本，使其位于中间(垂直和水平)。我做了一个jsfiddle example这是我的代码:

<ul>
    <li class="one"><span>One</span></li>
    <li class="two"><span>Two</span></li>
</ul>

CSS:

ul {
    height: 200px;
    border: 1px solid #000;
    width: 200px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

li {
    height: 30px;
    width: 100%;
    position: absolute;
    background-color: blue;
}

.one {
    top: 30px;
    height: 50px;
}

.two {
    top: 150px;
}

li span {
    color: #fff;
    vertical-align: middle;
    height: 100%;
    display: block;
}

李的高度可以变化。以上只是使用固定高度的引用。

Answer 1

您需要将 line-height 设置为与您的 li 相同的高度:

li span {
    color: #fff;
    vertical-align: middle;
    height: 100%;
    display: block;
    line-height:30px;
}
li.one span{
    line-height:50px;
}

这是您的演示:http://jsfiddle.net/r4Dr9/2/