如何在 < span > 中垂直居中显示文本？

我如何能垂直居中的文本是包装在一个 <span>？<span>必须有 min-height的 45px。以下是我的设想:

--------                  -------
text


--->      text




--------                  -------

我试了 vertical-align和这个 文章的方法，都没有用

132767 次浏览
小开
最佳答案

尝试使用 弹簧箱，所有的现代浏览器都支持它，与 前缀也可以在 IE10中工作。

span {
min-height: 100px;
display: inline-flex;
align-items: center;
border: 1px solid aqua;
}
<span>vertical center</span>

小开

在使用 span 时，只需将 display 方法更改为 table-cell即可。请记住，如果要使用 div 而不是 span，则可能需要使用其他方法。

span {
height: 45px;
border: 1px solid #444;
display: table-cell;
vertical-align: middle;
}
<span>text</span>

小开

Span 设置为内联显示，链接到的示例应该与设置为显示块的 div 一起使用。尝试向 span 添加显示块，然后按照链接中的建议操作。把它们结合起来应该能起作用。 但是，为什么要用跨度呢？

小开

如果您需要对旧浏览器(即 IE6和 IE7)的真正支持，那么实现这一点的“旧”方法是使用 line-height。此方法只允许1行文本。

span {
display: inline-block;
line-height: 100px;
border: 1px solid red;
}
<span>vertical center</span>

小开

如果您需要在 span 元素中水平和垂直对齐文本，也可以尝试使用 inline-grid显示。

span {
display: inline-grid;
align-items: center;
text-align: center;
}


<span>vertically and horizontally centered text spanning over more than just one line</span>
小开 
span{
height: 45px;
display: grid;
align-items: center;
}

enter image description here

小开

您可以通过以下任何一种方法实现垂直中心文本对齐，这些方法基于您的应用程序将要支持的浏览器。

<span class="vertical-center">Center Text</span>

1)使用 display: inline-flex; (如果你的目标客户是像 Chrome、 safari、 IE11或更高版本的浏览器，你可以使用 flex) 检查: 我可以使用 < a href = “ https://caniuse.com/# search = inline-flex”rel = “ nofollow norefrer”> https://caniuse.com/#search=inline-flex 吗

.vertical-center {
display: inline-flex;
border: 1px solid #ddd;
min-height: 100px;
align-items: center;
}

2)使用 display: table-cell; (如果你的目标浏览器太像 IE9，那么使用第二种方法)

.vertical-center-table-cell {
display: table-cell;
border: 1px solid #ddd;
height: 100px;
vertical-align: middle;
}

演示: < strong > JSFiddle


提交答案