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

【问题标题】：Position span text in the middle (vertically and horizontally) of a li element将 span 文本放置在 li 元素的中间（垂直和水平）
【发布时间】：2019-05-15 17:57:27
【问题描述】：

如何定位跨度文本，使其位于中间（垂直和水平）。我做了一个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 的高度可以变化。以上只是使用固定高度的参考。

【问题讨论】：

stackoverflow.com/questions/14758967/centering-text-in-a-div/…的可能重复

标签： html css

【解决方案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/

【讨论】：

这是一个解决方案。但如果你问我，这不是一个很好的。如果 li 的高度是动态的呢？
如果高度是动态的，您应该采用不同的方法。您需要将li 设置为display:table，将span 设置为display:table-cell。 vertical-align:middle 应该可以工作。这是演示：jsfiddle.net/r4Dr9/5

【解决方案2】：

您无需使用边距或内边距。

给<li>一个display:table;，给<span>一个display:table-cell;。

DEMO

要添加的 CSS

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

添加 text-align: center; 和 line-height 就成功了。

【解决方案4】：

几件事。首先，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。

【讨论】：

【解决方案5】：

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

【讨论】：