CSS实现单行文本居中，多行文本居左

要实现的效果如上图所示，在一个容器内多行文字为靠左对齐，单行文字为居中对齐。

HTML结构如下：

<div class="box">
    <p>多行文字内容多行文字内容多行文asdasd字sdfsdf123124容多行文字内容多行文字内容多行文字内容</p>
    <p>单行文字内容单行文字内容</p>
</div>

CSS：

/* text-align: center; 让段落这个行内块居中 */
.box{
    margin: 0 auto;
    margin-bottom: 40px;
    width: 300px;
    height: 300px;
    background: red;
    text-align: center;
}

/* text-align: left; 让文字居左 */
.box p{
    margin-top: 20px;
    background: green;
    display: inline-block;
    text-align: left;
}

主要是利用text-algin这个属性，官方说法为：

text-align 属性规定元素中的文本的水平对齐方式。

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。

可以设置块级元素内文本的水平对齐方式，除了可以设置文本的对齐方式外也可以设置行内元素或行内块元素水平对齐，所以我们先将p标签更改为行内块元素，然后分别给.box和p添加text-algin: center;和text-algin: center;声明。

其中.box的text-algin: center;声明是为了让box内的p标签在box内水平居中，这样就使得不满一行的内容为居中对齐。

p标签的text-algin: left;声明是为了让p标签内的文字是居左对齐的，这样使得p内文字满一行自动换到下一行的时候是居左对齐的。