使用 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>