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

您可以添加行高：36pt到h3标记。

<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>

Answer 2

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

在这种情况下，我们（因为你设置为36pt），即：line-height: 36pt

行高示例：

＆＃13;

<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>

＆＃13;

如果容器的高度是动态的并且未知，则需要使用其他形式的垂直居中，例如使用 display：table 或 display：flex

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

Answer 3

您可以添加line-height，这取决于<div>

的高度

＆＃13;

<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>

＆＃13;

看看这个example fiddle

如何在这个<div>元素中居中文本？

3 个答案: