Html text-align:center 不适用于表单 <label> 标签 (?)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/638347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text-align:center won't work with form <label> tag (?)
提问by edzillion
I was going through a site I have just completed, and fixing up some accessibility issues. I had a form:
我正在浏览一个我刚刚完成的网站，并修复了一些可访问性问题。我有一个表格：
<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" />
This was flagged because their is no tag to identify the input field for entering the email address. So I changed the
这被标记是因为他们没有标记来识别用于输入电子邮件地址的输入字段。所以我改变了
tag to a tag like so:
标记到这样的标签：
<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" />
and the CSS:
和 CSS：
#formItem label {
text-align:center;
line-height:150%;
font-size:.85em;
}
But the text appears as left justified, and not centered. I've looked around that there are no obvious bugs. This is happening in both FF 3.x and IE 7.x
但文本显示为左对齐，而不是居中。我环顾四周，没有明显的错误。这发生在 FF 3.x 和 IE 7.x
回答by Can Berk Güder
This is because labelis an inline element, and is therefore only as big as the text it contains.
这是因为label是一个内联元素，因此仅与它包含的文本一样大。
The possible is to display your labelas a block element like this:
可能是将您显示label为块元素，如下所示：
#formItem label {
display: block;
text-align: center;
line-height: 150%;
font-size: .85em;
}
However, if you want to use the label on the same line with other elements, you either need to set display: inline-block;and give it an explicit width (which doesn't work on most browsers), or you need to wrap it inside a divand do the alignment in the div.
但是，如果您想将标签与其他元素在同一行上使用，则需要设置display: inline-block;并为其指定显式宽度（这在大多数浏览器上不起作用），或者需要将其包装在 a 中div并执行中的对齐方式div。
回答by Andrew Hare
labelis an inline element so its width is equal to the width of the text it contains. The browser is actually displaying the label with text-align:centerbut since the label is only as wide as the text you don't notice.
label是一个内联元素，所以它的宽度等于它包含的文本的宽度。浏览器实际上正在显示标签，text-align:center但由于标签的宽度与您没有注意到的文本一样宽。
The best thing to do is to apply a specific width to the labelthat is greater than the width of the content - this will give you the results you want.
最好的做法是将特定宽度应用于label大于内容宽度的宽度 - 这将为您提供所需的结果。
