如何在更改字体大小的块元素中垂直居中文本？

Question

我通常将文本垂直居中的方法是使用等于容器高度的行高。

因此，容器有

height: 60px;
line-height: 60px;

子元素有

line-height: 60px;

这行得通。但是如果你将font-size 增加到 1em 以上，那就搞砸了。更糟糕的是，浏览器的处理方式不一致！

这是一个 JSFiddle 演示：http://jsfiddle.net/tgv2rx7f/7/。请注意，在 Firefox 中，大“A”。太靠近容器顶部。在演示中看起来并没有那么糟糕，但在我的实际网站上，它非常引人注目且令人分心。如果你在 Firefox 中修复它，那么它在 Chrome 中太低了。

无论我做什么，我似乎都无法让它始终如一地工作。我玩过不同的vertical-align 值、top、text-top、middle... 没有骰子。如果我将容器更改为display:inline，我可以让它工作，但在我的布局中它需要是block 或inline-block。

PS，我不能使用弹性盒子。

编辑：这是我在实际网页（蓝色）和 JSFiddle（绿色）中看到的。

铬：

火狐：

编辑 2：感谢andyb 指出使用ems 会改变使用px 设置的容器的大小。它还有助于揭示另一个复杂性，即浏览器对字体大小和高度的处理方式不同，但这似乎超出了这个问题的范围，所以我创建了一个关于该主题的新问题 (here) 并标记为 andyb's回答为接受。

Answer 1

在container 和b 块上，line-height 和font-size 会导致块的高度发生变化。 line-height 和 font-size 互相交流！ line-height 是容器中文本行之间的垂直距离。所以line-height:60px 和font-size:2.5em 容器的高度增长到73px。这在 CSS 中被容器上的硬 height:60px 所抵消，但这不会影响文本 baseline。文本“1”。如果基线发生变化，容器中的内容将向上或向下移动。如果.a 上的字体大小增加，则基线下降，拖动文本“1”。下。您可以通过转动所有垂直对齐并增加.a 的字体大小和“1”来检查这一点。内容向下移动。考虑到这一点，我们实际上只需要修复容器的垂直对齐方式，如下所示：

.container {
  display: block;
  overflow: hidden;
  height: 60px;
  line-height: 60px;
  vertical-align: top;
  font-size: 2.5em;
  width: 100%;
  text-align: center;
  background-color: lightgreen;
  text-decoration: none;
}
.a {
  font-size: 2em;
}

<a href="#" class="container">
  1.<span class="a">A.</span><span class="b">b b b b b b b</span>
</a>

但基线仍然是A底部的位置，因为A是正常流程中的最后一个容器，请参阅：

只要.b 的字体大小小于.a，那么基线将与.a 保持一致，请参阅.b 上的小字体大小的下一张图片：

但是，请注意.b 容器继承了line-height:60px - 参见Why does this inline-block element have content that is not vertically aligned，所以高度是正确的，我们可以将vertical-align 和.b 放在容器的顶部，这是相同的高度，因此导致文本居中对齐，如下所示：

.container {
  display: block;
  overflow: hidden;
  height: 60px;
  line-height: 60px;
  vertical-align: top;
  font-size: 2.5em;
  width: 100%;
  text-align: center;
  background-color: lightgreen;
  text-decoration: none;
}
.a {
  font-size: 2em;
}
.b {
  display: inline-block;
  font-size: 23px;
  vertical-align: top;
  font-family: sans-serif;
  text-align: center;
}

<a href="#" class="container">
1.<span class="a">A.</span><span class="b">b b b b b b b</span>
</a>