html - 如何将 元素中的文本居中？

Question

这是 div 中的 h3(使用内联样式，我知道这是不好的)。

<div style="background-color: rgb(238, 238, 238); width: 500px; height: 36pt; text-align: center;">
<h3 style="font-family: Helvetica;">Hello World!</h3></div>

如何让 h3 标签在 div 中居中？

Answer 1

为了便于垂直居中，您可以将 H3 line-height 设置为与容器的高度相同(如果已知)。

在这种情况下，我们会这样做(因为您已将其设置为 36pt)，即:line-height: 36pt

行高示例:

<div style="background-color: rgb(238, 238, 238); width: 500px; height: 36pt; text-align: center;">
  <h3 style="font-family: Helvetica;line-height: 36pt">Hello World!</h3>
</div>

如果容器的高度是动态的且未知，则需要使用另一种形式的垂直居中，例如使用display:table 或display:flex

这个关于在 CSS 中居中内容的资源对于找到最佳解决方案非常有用:https://css-tricks.com/centering-in-the-unknown/