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

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

我们看一下如下代码:

     

我们交个朋友吧!

好呀!你好,My new friend。

看一下效果

HTML - 内联元素居中和块级元素居中_第1张图片HTML - 内联元素居中和块级元素居中_第2张图片

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

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

     

我们交个朋友吧!

好呀!你好,My new friend。

HTML - 内联元素居中和块级元素居中_第3张图片HTML - 内联元素居中和块级元素居中_第4张图片

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

 

 

     

我们交个朋友吧!

好呀!你好,My new friend。

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

 

 

 

 

 

你可能感兴趣的:(HTML/CSS)