文字少于一行时居中，超过一行时靠左
##css部分
.box{
text-align: center;
}
.text{
display: inline-block;
text-align: left;
}
##html部分
文字长度
原理：
给 p 标签设置 inline-block 后，该标签变成 内联块级元素。根据内联元素的特性，宽度为 auto 默认值时，真实宽度为文本的宽度，此时 text-align: left 是起了作用的，它在 p 标签中靠左显示，而整个 p 标签因为父级 div 的 text-align: center 设置又居中，所以出现一行时居中，超出一行时靠左的表象。