我使用css样式文本对齐来对齐HTML容器中的内容。当内容为文本或浏览器为IE时,此功能工作正常。但除此之外,它并不起作用。
此外,顾名思义,它基本上用于对齐文本。align属性早就被弃用了。
有没有其他方法可以对齐html中的内容?
发布于 2009-03-26 05:46:21
文本对齐将文本和其他内联内容对齐。它不会对齐块元素的子元素。
要做到这一点,你需要给你想要对齐的元素一个宽度,左边距和右边距都是‘auto’。这是一种符合标准的方式,除了IE5.x之外,在任何地方都可以使用。
<div style="width: 50%; margin: 0 auto;">Hello</div>
为了在IE6中工作,您需要使用合适的DOCTYPE来确保Standards Mode处于打开状态。
如果你真的需要支持IE5/Quirks模式,而现在你真的不应该这样做,那么可以结合两种不同的居中方式:
<div style="text-align: center">
<div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>
(显然,样式最好放在样式表中,但内联版本是说明性的。)
发布于 2016-10-27 23:07:57
<div class="content">Hello</div>
.content {
margin-top:auto;
margin-bottom:auto;
text-align:center;
}
发布于 2013-08-05 02:21:07
老实说,我讨厌我到目前为止看到的所有解决方案,我会告诉你为什么:它们似乎从来没有对齐过,right...so这是我通常做的:
我知道每个div的像素值和它们各自的边距hold...so,我这样做。
我将创建一个包装器div,它有一个绝对位置和一个左值50%...so这个div现在从屏幕中间开始,然后我减去了div的width...and的一半内容我得到了漂亮的缩放content...and我想这也适用于所有浏览器。自己尝试一下(这个示例假设站点上的所有内容都包装在使用此包装器类的div标记中,并且其中的所有内容的宽度都是200px ):
.wrapper {
position: absolute;
left: 50%;
margin-left: -100px;
}
编辑:I forgot to add...you可能还想在这个包装器div上设置宽度: 0px;,以便某些浏览器不显示滚动条,然后您可以对所有内部div使用绝对定位。
这也适用于垂直对齐你的内容,以及使用顶部: 50%和页边距顶部。干杯!
https://stackoverflow.com/questions/684634
复制相似问题