我正在浏览一个刚刚完成的网站,并修复了一些可访问性问题.我有一个表格:
Enter your Email Address to receive our Weekly Newsletter
这是标记的,因为它们没有用于标识输入电子邮件地址的输入字段的标记.所以我改变了
标记到这样的标记:
和CSS:
#formItem label { text-align:center; line-height:150%; font-size:.85em; }
但文本显示为左对齐,而不是居中.我环顾四周,没有明显的错误.这种情况发生在FF 3.x和IE 7.x中
这是因为label
是一个内联元素,因此只与它包含的文本一样大.
可能的是将您label
的块元素显示为:
#formItem label { display: block; text-align: center; line-height: 150%; font-size: .85em; }
但是,如果要在与其他元素相同的行上使用标签,则需要设置display: inline-block;
并为其指定显式宽度(在大多数浏览器中不起作用),或者需要将其包装在a中div
并执行对齐div
.
label
是一个内联元素,因此它的宽度等于它包含的文本的宽度.浏览器实际上是显示标签,text-align:center
但由于标签的宽度与您没有注意到的文本一样宽.
最好的办法是将特定宽度应用于label
大于内容宽度的宽度 - 这将为您提供所需的结果.