<p>单行居中</p>
    <div class="box">
        <p class="content">单行居中</p>
    </div>
    <p>多行左对齐</p>
    <div class="box">
        <p class="content">多行左对齐,多行左对齐,多行左对齐,多行左对齐,多行左对齐,多行左对齐,</p>
    </div>
<style>
    .box{
        width: 240px;
        text-align: center;
        background-color: rgb(54, 54, 54);
        color: white;
    }
    .content{
        background-color: yellowgreen;
        display: inline-block;
        text-align: left;
    }
</style>

效果

img1.png

为了更加明显，更改一下底色

img2.png

总结一下：
当p标签宽度小于div时，因为text-align所以为inline-block元素的p标签居中了。
随着p标签内容的增加，p标签的宽度和div相等了，于是出现了换行。
也就是说一开始左对齐的的效果就是存在的，只是因为没有达到换行的宽度，而且受到父标签text-align: center;的影响，看不出来罢了。
下图单行居中p标签文本中添加了几个圆角空格，可以更好的理解以上内容。

img3.png