Question

我有以下内容：

<div id="wrapper">
  <span id="small">I want to be vertically centered!!!</span>
  <span id="big">BIG</span>
</div>

这是jsfiddle：

如何垂直居中第一个跨度？

Answer 1

给予display:inline-block; vertical-align:middle;跨度将使它们相对于彼此垂直居中。

span {display:inline-block; vertical-align:middle;}
span#big {font-size: 200%;}

<div id="wrapper">
  <span id="small">I want to be vertically centered!!!</span>
  <span id="big">BIG</span>
</div>

Answer 2

我建议vertical-align: middle同时设置line-height。

虽然并不严格需要line-height，但它是确定文本居中高度的有用方法。例如，如果您知道您希望空间的高度为100px，则可以设置line-height: 100px;，它将占用100px，并且两行文本都将在该空间中居中。

span#small,
span#big {
  display: inline-block;
  vertical-align: middle;
  line-height: 3em;
}

Answer 3

你可以使用flexbox：

#wrapper {
  display: flex;
  align-items: center;
}
#big {
  font-size: 200%;
}