html - 将 span 文本放置在 li 元素的中间（垂直和水平）

Question

如何定位跨度文本，使其位于中间（垂直和水平）。我制作了一个jsfiddle 示例，这是我的代码：

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

li 的高度可以变化。以上只是使用固定高度的参考。

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/

Answer 2

您不需要使用边距或填充做技巧。

给出<li>adisplay:table;和<span>a display:table-cell;。

演示

要添加的 CSS

li {
    text-align:center;
    display:table;
}

li span {
    display:table-cell;
    vertical-align:middle;
}

Answer 3

几件事。首先，height:100%;，vertical-align:middle;什么都不做。此外，width:100%;无论是否指定文本对齐，它总是默认为左。我个人会使用填充：

li span {
    display:inline-block;
    color: #fff;
    text-align:center;
    height: 100%;
}

.one span {
    padding-top:10px;
}

.two span {
    padding-top:3px;
}

我也更新了你的 jsFiddle。

Answer 4

尝试text-align: center;在 上使用li span，您必须相应地为每个设置上边距才能从顶部向下移动。

Answer 5

在 li 元素上添加了样式 - 'text-align: center'，它对我有用