单行居中，多行居左

居中需要用到 text-align:center，居左是默认值也就是text-align:left。如合让两者结合起来达到单行居中，多行居左呢？这就需要多一个标签，假设一开始我们定义如下：

1

<h2>单行居中，多行居左</h2>

现在，我们在 h2 中间，嵌套多一层标签 p：

1

<h2><p>单行居中，多行居左</p></h2>

我们让内层 p 居左 text-align:left，外层 h2 居中 text-align:center，并且将 p 设置为display:inline-block ，利用 inline-block 元素可以被父级 text-align:center 居中的特性，这样就可以实现单行居中，多行居左，CSS 如下：

1

2

3

4

5

6

7

p {

    display: inline-block;

    text-align: left;

}

h2{

    text-align: center;

}