对齐div中的内容
我使用css样式文本对齐来对齐HTML容器中的内容。当内容为文本或浏览器为IE时，此功能工作正常。但除此之外，它并不起作用。
此外，顾名思义，它基本上用于对齐文本。align属性早就被弃用了。
有没有其他方法可以对齐html中的内容？
回答 6
Stack Overflow用户
发布于 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>(显然，样式最好放在样式表中，但内联版本是说明性的。)
Stack Overflow用户
发布于 2016-10-27 23:07:57
<div class="content">Hello</div>
.content {
margin-top:auto;
margin-bottom:auto;
text-align:center;
}Stack Overflow用户
发布于 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
复制相似问题