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

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

css:

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

我想要实现文字在蓝色框里两端对齐，而图片在蓝框里水平居中，但是对img的center属性设置后无效

---

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);
    }