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

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>一个display:table;和<span>一个display:table-cell;。

DEMO

要添加的CSS

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

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

Answer 3

一些事情。首先，height:100%;，vertical-align:middle;什么都不做。此外，使用width:100%;并且未指定text-align，它将始终默认为left。我个人使用填充：

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'对我有用

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

5 个答案: