html - 将图像置于中心，左右边距最小

Question

我正在我的网页中插入一张图片。我想将它放在中间，左右两侧的最小边距为 10px。此外，它应该根据媒体宽度保持其宽度。 margin: 0 auto 将其定位在中心，但不会与两侧保持至少 20px 的边距。

我怎样才能实现目标？

Answer 1

CSS

div{
    margin-left: 10px;
    margin-right: 10px;
}
img{
    margin: 0 auto;
}

HTML

<div>
    <img src="image.png"/>
</div>