当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《text-align:center不能使用form<label>标签(?)》经验,为你挑选了2个好方法。

我正在浏览一个刚刚完成的网站,并修复了一些可访问性问题.我有一个表格:


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中



1> Can Berk Güd..:

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

可能的是将您label的块元素显示为:

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

但是,如果要在与其他元素相同的行上使用标签,则需要设置display: inline-block;并为其指定显式宽度(在大多数浏览器中不起作用),或者需要将其包装在a中div并执行对齐div.


另请注意,如果设置宽度:100% - 当标签位于表格单元格内时,右侧网站上的填充或边距不会起作用.

2> Andrew Hare..:

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

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

推荐阅读
mobiledu2402851373
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有