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

Question

我已经在很多地方读过中心元素(例如div)margin:0 auto.
但为什么不用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"属性用于以块为单位布局的内联元素.当您尝试将块级元素集中在某些内容中时,内联布局样式没有意义.

元素上的(现已弃用)align属性不是CSS的东西; 这是对过去时代的回归.

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

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

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>