将文本定位在<label></label>内

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

您的问题非常简单: label不是块级标记，这意味着您不能为label元素提供宽度。换句话说，标签元素的宽度就是其内容的宽度。

在你的例子中，这意味着它不能填满你的"test“div的整个宽度，并且不能居中。

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

显示:内联-块；

这样，您的标签将被视为与宽度(和高度)相关的所有内容的块，并且您的100%宽度将被成功应用，从而产生一个良好的居中文本。