Question

我正在浏览一个刚刚完成的网站，并修复了一些辅助功能问题。我有一个表格：

<input type="hidden" name="redirect" value="thank-you.php" />
<p>Enter your Email Address to receive our Weekly Newsletter</p>                            
<input name="email" type="text" id="formifemail" size="21" />
<input type="image" src="images/newsletter_button.jpg" alt="submit button" border="0" name="Submit" id="Submit" value="Send" />

这是标记的，因为它们没有用于标识输入电子邮件地址的输入字段的标记。所以我将

标签更改为如此标记：

<input type="hidden" name="redirect" value="thank-you.php" />
<label for="formifemail">Enter your Email Address to receive our Weekly Research</label>                            
<input name="email" type="text" id="formifemail" size="21" />
<input type="image" src="images/newsletter_button.jpg" alt="submit button" border="0" name="Submit" id="Submit" value="Send" />

和CSS：

#formItem label {
    text-align:center;
    line-height:150%;
    font-size:.85em;
}

但是文本显示为左对齐，而不是居中。我环顾四周，没有明显的错误。这种情况发生在FF 3.x和IE 7.x

中

Answer 1

这是因为label是一个内联元素，因此它只与它包含的文本一样大。

可能会将label显示为块元素，如下所示：

#formItem label {
    display: block;
    text-align: center;
    line-height: 150%;
    font-size: .85em;
}

但是，如果要在与其他元素相同的行上使用标签，则需要设置display: inline-block;并为其指定显式宽度（在大多数浏览器中不起作用），或者您需要将其包裹在div内并在div中进行对齐。

Answer 2

label是一个内联元素，因此它的宽度等于它包含的文本的宽度。浏览器实际上显示的标签为text-align:center，但由于标签的宽度与您未注意到的文字一样宽。

最好的办法是在label上应用一个大于内容宽度的特定宽度 - 这样可以获得所需的结果。

text-align：center不适用于表单<label>标签（？）</label>

2 个答案: