使用CSS将HTML中的图片居中[重复]

Question

此问题已经在这里有了答案：

Center image using text-align center?（24个答案）

Flexbox: center horizontally and vertically（12个答案）

关闭54秒前。

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

我正在尝试使所有图像整齐地居中。我连续有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>