使用 CSS 在 HTML 中居中图像

Question

我的图像并非全部居中。它们大致从中间开始，然后向右侧和侧面移动，在左侧留下一个空间

我正在尝试使我的所有图像整齐居中。我连续有 3 张图像，但左侧有很大的间隙，因此图像大致从中心开始，然后向右开始。我希望所有图像都正确居中。这是我的 html 代码：

.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}

<div class="row">
<div class="column">
<img src="https://i.picsum.photos/id/1002/50/50.jpg" alt="Great Wall of China" >
</div>
<div class="column">
<img src="https://i.picsum.photos/id/1002/50/50.jpg" alt="Great Wall of China">
</div>
<div class="column">
<img src="https://i.picsum.photos/id/1002/50/50.jpg" alt="Great Wall of China">
</div>
</div>

Answer 1

.flex-container {
display: flex;
/* flex-direction: row; */
justify-content: center;
}
.column {
/* flex: 33.33%; */
padding: 5px;
}

从class=">

---

row"到class="flex-container">

<div class="flex-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>