上一节介绍了不定宽块级元素居中的第一种方法,添加table标签,然后给元素设置margin:0 auto;
但是这一种方法添加了多余的标签,有损网页的语义化。那么接下来不定宽块级元素居中第二种方法设置display:inline;就不会出现这一种情况。
html关键代码
<div class="blockCenter">
<p>不定宽块级元素居中的第二种方法,display:inline;</p>
</div>
css关键代码
<style>
/*第一步:给元素设置display:inline;*/
p{display:inline;}
/*第二部:给父元素设置text-align:center;*/
.blockCenter{text-align:center;}
</style>
原理:设置了inline属性以后,元素实质上具备了行级元素的特性,所以第二部实际上是将行级元素居中。
这一种方法虽然没有添加多余的标签,但是它使得元素变为了行级元素,让元素无法再设置高度,宽度以及外边距。
下一节将介绍不定宽块级元素居中的第三种方法。
欢迎转载,请注明出处!