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

Question

如何垂直居中包含在文本中的文本<span>？在<span>必须min-height的45px.这是我想象的:

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

                --->      text   


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

我尝试了本文中的vertical-align方法.他们都没有工作

Answer 1

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

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

<span>vertical center</span>

Answer 2

在使用span时,您只需将显示方法更改为table-cell.请记住,如果要使用div而不是span,则可能需要使用其他方法.

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

<span>text</span>

Answer 3

如果您需要真正支持旧浏览器（即 IE6 和 IE7），则执行此操作的“旧”方法是使用line-height. 此方法仅允许 1 行文本。

span {
    display: inline-block;
    line-height: 100px;
    border: 1px solid red;
}

<span>vertical center</span>

Answer 4

根据您的应用程序将支持的浏览器，您可以通过以下任何方法实现垂直居中文本对齐。

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

1）使用显示：inline-flex；（如果您的目标是 Chrome、safari、IE11 及更高版本等现代浏览器，您可以使用 Flex）检查：我可以使用https://caniuse.com/#search=inline-flex

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

2）使用显示：table-cell；（如果您的目标也是较旧的浏览器，例如 IE9，请使用第二种方法）

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

演示：JSFiddle