如何在div中文字两端对齐而图片水平居中？

1）先把img放在 p 标签外面

<section class="post">
            <div class="post-title">...</div>
            <div class="post-meta">...</div>
            <div class="post-content">
                 <p>
                 ...
                 <br>
                 </p>
                 <img src="#.jpg" alt="avatar.jpg" />
             </div>
        </section>```

css：

.post-content {
    border: 1px blue dashed;
    width: 700px;
    text-align: center;
}
.post-content p{
    border: 1px red dashed;
    text-align: center;
    text-align: justify;
}

img 自身不能居中，只能在父元素中居中，所以center属性需要设置给父元素，但是 p 又要两端对齐，所以 img 要放在 p 外面。

2）位置不变，图片居中另外一种方法：

.post-content p img{
        position: relative;
        left:50%;
        transform:translate(-50%,0);
    }