我使用css样式text-align来对齐HTML中容器内的内容.这个工作正常,而内容是文本或浏览器是IE.但否则它不起作用.
另外顾名思义它基本上用于对齐文本.align属性已被弃用.
有没有其他方法来对齐html中的内容？
text-align对齐文本和其他内联内容.它不对齐块元素子元素.
要做到这一点,你想给你想要的元素对齐一个宽度,用'auto'左右边距.这是符合标准的方式,除了IE5.x以外的任何地方都可以使用.
Hello
为了在IE6中工作,您需要使用合适的DOCTYPE 确保标准模式已启用.
如果你真的需要支持IE5/Quirks模式,现在你不应该这样做,可以将两种不同的方法结合起来进行居中:
Hello
(显然,样式最好放在样式表中,但内联版本是说明性的.)
你也可以这样做:
HTML
CSS
body { width: 100%; margin: 0; padding: 0; overflow: hidden; }
#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }
#container_1 { display: block; float: left; position: relative; right: 50%; }
正如Artem Russakovskii也提到的那样,请阅读Mattew James Taylor的原始文章以获得完整描述.
Hello.content { margin-top:auto; margin-bottom:auto; text-align:center; }
老实说,我讨厌到目前为止我见过的所有解决方案,我会告诉你原因:他们似乎没有正确对齐......所以这就是我通常做的事情:
我知道每个div的像素值和它们各自的边距都有...所以我做了以下几点.
我将创建一个包装器div,它具有绝对位置和50%的左值...所以这个div现在从屏幕中间开始,然后我减去div宽度的所有内容的一半...我得到了美丽的缩放内容......我认为这也适用于所有浏览器.自己尝试一下(这个例子假设你网站上的所有内容都包含在使用这个包装类的div标签中,其中所有内容的宽度都是200px):
.wrapper {
position: absolute;
left: 50%;
margin-left: -100px;
}
编辑:我忘了添加...你可能还想设置宽度:0px; 在这个包装器div上,某些浏览器不显示滚动条,然后你可以对所有内部div使用绝对定位.
使用top:50%和margin-top也可以使用AMAZING来垂直对齐你的内容.干杯!
京公网安备 11010802040832号 | 京ICP备19059560号-6 