将文本放在<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

您的问题非常简单：标签不是块级标签，这意味着您无法为标签元素指定宽度。换句话说，标签元素的宽度是其内容的宽度。

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

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

display：inline-block;

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