css设置单行居中，多行居左/居右

在标题的设置上，不知道大家有没有碰到过这样的一个情况：在文本字数在一行的情况下，让其居中显示，而在文本字数达到多行的情况下，让其居左显示

其实当时在自己脑中显示就是利用js来控制（原谅我是个菜鸟）

经过公司同事的点拨，第一次使用了css来这样的布局

废话多了，直接上个代码吧。。

html中

<div>    <p>标题内容</p></div>

css中

div {    padding : 0 2vw;    margin : 0 auto; // 使div框居中    width : 80vw;     text-align : center; // 文本居中显示}p {    width : auto;  // 必设    display : inline-block; // 不能设置为block    text-align : left; // 居左显示}

这样就可以达到效果啦。。。

不需要每次都想着用js来解决问题了