css - 将文本定位在 中

Question

尊敬的社区成员，

我想将测试中的文本放在 div 的中心。代码如下所示:

<div id="main" style="width: 960px;">
<form>
<label for="test">Testing everything:</label>
</form>

现在，如果我尝试以下代码部分:

<label for="test" style="width: 100%; text-align:center;">Testing everything:</label>

它不会在我的主层中居中放置文本。我需要在标签标签周围放一层吗？

<div style="width:100%; text-align:center;"><label for="test">Testing everything:</label></div>

实现该目标的标准方法是什么？

感谢您的回复!

Answer 1

你的问题很简单:标签不是 block 级标签，这意味着你不能给标签元素一个宽度。换句话说，标签元素的宽度就是其内容的宽度。

在您的情况下，这意味着它不会填满“测试”div 的整个宽度，因此无法居中。

要解决此问题，只需将以下 CSS 属性添加到您的标签中:

显示:内联 block ；

这样，您的标签将被视为与宽度(和高度)相关的所有内容的 block ，并且您的 100% 宽度将成功应用，从而导致文本居中。