6

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

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

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

4

2 回答 2

2

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

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

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

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

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

于 2013-04-29T06:38:39.637 回答
1

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

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

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

于 2013-04-29T06:50:59.993 回答