我正在浏览一个我刚刚完成的网站，并修复一些无障碍问题。我有一个表格：
<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;
}但是文本显示为左对齐，而不是居中。我四处查看了一下，没有明显的bug。FF 3.x和IE 7.x都有这种情况
3条答案
按热度按时间z4iuyo4d1#
这是因为
label是一个行内元素，因此大小与它所包含的文本相同。可以将
label显示为如下的块元素：然而，如果你想在同一行使用标签和其他元素，你要么需要设置
display: inline-block;并给予它一个明确的宽度（这在大多数浏览器上不起作用），要么你需要把它 Package 在div中并在div中对齐。46qrfjad2#
label是一个行内元素，所以它的宽度等于它所包含的文本的宽度。浏览器实际上是用text-align:center显示标签，但由于标签的宽度与文本的宽度相同，所以您没有注意到。最好的方法是对
label应用一个特定的宽度，该宽度大于内容的宽度-这将给予您想要的结果。cotxawn73#
label是一个行内元素，因此它的宽度等于它所包含的文本的宽度。浏览器实际上是用text-align:center显示标签，但由于标签的宽度仅与文本的宽度相同，因此您不会注意到。将它放在div中，并为div给予属性。