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

Question

如何垂直居中包含在 <span> 中的文本？ <span> 必须有 min-height 的 45px 。这是我的设想：

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

                --->      text

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

我尝试 vertical-align 以及 本文 中的方法。他们都没有工作

原文由 Alex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试使用 flexbox ，所有现代浏览器都支持它，带有 前缀 它也适用于 IE10。

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

 <span>vertical center</span>

原文由 Stickers 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 span 时，您可以简单地将显示方法更改为 table-cell 。请记住，如果您要使用 div 而不是 span，您可能需要使用其他方式。

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

 <span>text</span>

原文由 Mojtaba 发布，翻译遵循 CC BY-SA 3.0 许可协议