没有下降的垂直居中文本？

Question

假设我有一行全部大写的文本（例如text-transform: uppercase）。我想在div 中垂直居中此文本。我不需要担心多行文本。

有几种方法可以在 CSS 中垂直居中（例如检查 this out）。不幸的是，所有这些方法都将descenders 考虑在内，并且我的文本没有任何下降，因此它没有完美居中。基本上，我想将文本部分从基线居中到大写高度。

有什么方法可以使一行大写文本垂直居中？现在我正在使用position: relative 并手动调整它直到它居中（例如使用top: 2px），但这显然不是一个强大的解决方案（它非常依赖于浏览器呈现文本的方式，可用的字体， ETC。）。谢谢！

Answer 1

line-height 实际上是在我们想要沿 y 轴对齐块元素之间时给出的。

例如，我在 w3schools 中有一个单行文本，para 高度为 20px。该段落将以其自己的默认方式编写，但如果我使用 line-height 等于段落的高度，那么 W3schools 中的文本将沿 y 轴在中间对齐。而如果你想水平对齐（x 轴对齐）你的文本然后 text-align:center 用于此目的。

请记住，line-height 并不完全取决于其自身元素的高度。但变化如下。

1. 如果你有一个单行文本，高度是 20px 然后给 line-height: 20px 垂直对齐文本或垂直居中 文本。
2. 如果您有两行文本，高度为 20 像素，则指定 line-height:10 像素并使用小的 padding-top 垂直对齐文本。

我希望这会让你振作起来。而且我认为您不需要更多地浏览谷歌。如果您需要更多解释，那么我会给您 jfiddle 代码。 :)

Answer 2

经过一些测试，我似乎对文本垂直居中的方式有​​误。事实证明，大多数浏览器都完全按照我的意愿行事——它们没有考虑下行。

对于那些不清楚我在问什么的人：“下降”是低于基线的文本部分。例如，小写字符“g”和“y”的部分低于基线。我想将没有这些字符的文本垂直居中（在我的情况下，只有像“X”这样的大写字符）。

Here 是一个 jsfiddle，它演示了我发现的内容（将 line-height 设置为 div 的高度）。请注意，“X”正确居中，这使得“g”溢出到 div 之外。但这对我来说没关系，因为文本都是大写的。