text-align:center不能使用form <label>标签(？)

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;并为其指定显式宽度(在大多数浏览器中不起作用),或者需要将其包装在a中div并执行对齐div.

Answer 2

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

最好的办法是将特定宽度应用于label大于内容宽度的宽度 - 这将为您提供所需的结果.