HTML - 内联元素居中和块级元素居中

text-align：'center' 这是针对内联元素的，而margin：0 auto 则是针对块级元素的居中方式。而且它们的使用对象不一样。

我们看一下如下代码：

     <div style='text-align:center;width:500px;height:500px;border:1px red solid'> 
         <p>我们交个朋友吧！</p>
         <div  style='width:300px;'>好呀！你好，My new friend。</div>
     </div>

看一下效果

应该很明显了吧，对于子div来说它并没有因为text-align:center属性而到中间去，而对于文本来说的确都居中了。

有人的会说，我有时写的div也会居中呀，那是怎么回事了。我们把子div的width去掉

     <div style='text-align:center;width:500px;height:500px;border:1px red solid'> 
         <p>我们交个朋友吧！</p>
         <div  >好呀！你好，My new friend。</div>
     </div>

原因应该很明显了，并不是子div居中了而是它的宽度等于父亲div,导致子div内部的文本视觉上居中了。

 

 

     <div style=' width:500px;height:500px;border:1px red solid'> 
         <p style='margin:0 auto'>我们交个朋友吧！</p>
         <div style=' width:300px;margin:0 auto' >好呀！你好，My new friend。</div>
     </div>

注意设置一下width属性，不然width和父级一样就看不出来了。内联元素没办法设置width和hight属性，除非修改display属性。