Question

我使用margin:0 auto在许多地方读过中心元素（例如div）但为什么不使用align:center？我认为使用后者似乎更自然。

另外，我们可以使用margin方法设置垂直对齐吗？

Answer 1

text-align: center将集中容器的内容，而margin: auto将使容器本身居中。

您应该对margin:auto小心，因为IE6不支持它。在IE6中，您应在外部容器上设置text-align:center，并将容器本身的CSS重置为text-align:left。

Answer 2

首先，没有“对齐：中心”。你所想的是“text-align：center”，而那个细节 - 前缀“text-” - 是一个关于问题是什么的提示。 “text-align”属性用于以块为单位布局的内联元素。当您尝试将块级元素置于某些内容中心时，内联布局样式没有意义。

元素上的（现在已弃用）对齐属性不是CSS的东西;这是对过去时代的回归。

现在，关于垂直对齐，遗憾的是答案是“不”，至少在实践中是这样。 “margin：auto”的技巧不起作用。温和地说，垂直对齐只有CSS才是挑战。有许多不同的情况和技术可供使用。这是关于这个主题的一个有趣的（如果有点旧）页面：http://www.student.oulu.fi/~laurirai/www/css/middle/

从未来编辑 - 任何试图进行垂直居中的人都应该关注flexbox layout的可用性。

Answer 3

text-align=center用于将内容（例如文字）与中心对齐，但margin: auto用于将元素本身与中心对齐。

在较旧的浏览器（IE）中，您可以使用text-align:center将元素与中心对齐。

但我怀疑你的意思是align=center，如下例所示：

<p align="center">
 .......
</p>

<h1 align="center">
 .......
</h1>

但是，并非所有元素都有align="center"，您必须使用margin:0 auto来对齐它们。

<强>因此，

如果您想要对齐元素的内容，您应该执行以下操作：

<p style="text-align:center">
 .......
</p>

如果你想对齐元素本身，你应该这样做：

<div style="margin:0 auto;">
 .......
</div>

<p style="margin:0 auto;">
 .......
</p>

使用`text-align：center`和`margin：0 auto`来区分CSS中的元素有什么区别？

3 个答案: