当前位置：首页 → 问答吧 → margin：0 auto；和 text-align：center；都是居中他们有什么区别吗？

margin：0 auto；和 text-align：center；都是居中他们有什么区别吗？

时间：2009-03-20

来源：互联网

margin：0 auto；和 text-align：center；

这两个居中有什么区别啊？

text-align：center；内容居中
margin：0 auto；块级元素居中

这样理解对吗？

作者: chuzhenji 发布时间: 2009-03-20

text-align：center 让容器中的元素居中
margin：0 auto；让容器自己居中

作者: phoenix2212 发布时间: 2009-03-20

margin：0 auto；这个是定义的块级元素本身居中的
举个例子：《div》这是一段文字《div》
上面的代码是让块级元素DIV自身居中的，而text-align:center;是让div里面的那段文字（“这是一段文字”）内联级别的基于div这层内居中

作者: ssmceo 发布时间: 2009-03-20

那就是text-align:center 对div 或者其它块级元素不起作用？？
而对行内元素如文字 <p> <img>起作用？？
可是似乎对块级元素<hn>也起作用阿？？
糊涂啊

作者: tinshee 发布时间: 2009-03-20

恩，我看过一篇关于这2个属性的文章介绍

我是越看越糊涂了

作者: chuzhenji 发布时间: 2009-03-20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> </head> <body> <div style="width:800px;background:#ddd;text-align:center"> <p>width:800px;background:#ddd;<b>text-align:center</b></p> <div style="margin:0 auto;width:400px;background:#d5d"><b>margin:0 auto;</b>width:400px;background:#d5d</div> <div style="width:400px;background:#fdd">width:400px;background:#fdd</div> <span>258</span> </div> <div style="width:800px;background:#bbb;text-align:left"> <p>width:800px;background:#ddd;text-align:left</p> <div style="margin:0 auto;width:400px;background:#d5d">width:800px;background:#ddd;text-align:left</div> <div style="width:400px;background:#fdd">width:400px;background:#fdd</div> <span style="margin:0 auto;">span:margin:0 auto;</span> </div> </body> </html>
提示：您可以先修改部分代码再运行

,上面这个实例专门针对这两个属性的区别而写,相信对理解有所帮助,这样子理解应该也会深刻一点.(分别用IE6和火狐查看吧.)
具体代码如下:

复制内容到剪贴板

代码:

  <div style="width:800px;background:#ddd;text-align:center">
      <p>width:800px;background:#ddd;<b>text-align:center</b></p>
         <div style="margin:0 auto;width:400px;background:#d5d"><b>margin:0 auto;</b>width:400px;background:#d5d</div>
          <div style="width:400px;background:#fdd">width:400px;background:#fdd</div>
          <span>258</span>
     </div>
      <div style="width:800px;background:#bbb;text-align:left">
      <p>width:800px;background:#ddd;text-align:left</p>
         <div style="margin:0 auto;width:400px;background:#d5d">width:800px;background:#ddd;text-align:left</div>
          <div style="width:400px;background:#fdd">width:400px;background:#fdd</div>
          <span style="margin:0 auto;">span:margin:0 auto;</span>
     </div>

IE6跟火狐的区别,IE的text-align:center能使其包含的块状元素和行内元素以及文本内容居中.
而在火狐下面text-align:center只能使其包含的行内元素和文本内容居中.
margin:0 auto能使块状元素居中,但不能使行内元素居中,这个在火狐和IE6下都是一样的.对于IE6以前版本的浏览器需要配合其父元素的text-align:center才能居中.

作者: lijun198296 发布时间: 2009-03-20

感谢楼上大哥的指导脑子里还是有些混
需要以后实践的时候记住它们的应用实例

在ie8下和火狐下显示的内容情况是一样子的 ie6下有区别 ie7下没有操作过

作者: chuzhenji 发布时间: 2009-03-20

使用text-align:center这个的布局居中一般是为了兼容ie6以下的，还不包括ie6

所以在【布局】上都不怎么用。

[ 本帖最后由 ONEBOYS 于 2009-3-20 13:23 编辑 ]

作者: ONEBOYS 发布时间: 2009-03-20

一个内一个外

作者: vocal 发布时间: 2009-03-20

呵呵，怎么好用怎么用，能用就行

作者: lu6428 发布时间: 2009-03-20

<div id="t1">
<div id="t2"></div>
</div>

#t1{
text-align:center;
}

这样t2在FF下并未居中，所以如果想要理想实现，最好用#t2{margin:0 auto;}

作者: rainoxu 发布时间: 2009-03-21

text-align：center 让容器中的元素居中
margin：0 auto；让容器自己居中
==================================

要的就是这个，回答经典，为了火狐这死垃圾我真费了不少时间，又为了那些没文化乱粘别人东西被百度GOOGLE收录的菜鸟又费不少时间，日，一句话，

作者: stephendeng 发布时间: 2011-03-04