css不定宽块级元素居中方法二

上一节介绍了不定宽块级元素居中的第一种方法，添加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属性以后，元素实质上具备了行级元素的特性，所以第二部实际上是将行级元素居中。

这一种方法虽然没有添加多余的标签，但是它使得元素变为了行级元素，让元素无法再设置高度，宽度以及外边距。

下一节将介绍不定宽块级元素居中的第三种方法。

欢迎转载，请注明出处！