如何将图像置于锚元素的中心？ [重复]

Question

此时，div 元素中的图像使用 flex 和一些 CSS 将它们出售到某种盒子中。同时，问题似乎出在我想将图像居中放置在 CSS 框的中心。

我试着用

text-align: center

和边距来做，但这使得锚元素彼此更接近。我想要的是保持链接之间的距离，同时图像居中到框的中心。

我现在看到的：

正如您在最后两个框中看到的那样，图像与左上角对齐，而不是居中。

我想要实现的目标（点是图像）：

.image-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  margin-top: 20px;
  padding-left: 80px;
}

.image-list img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-bottom: 10px;
  object-fit: contain;
  justify-content: center;
}

<div class="image-list">
  <a href=""><img src="https://via.placeholder.com/80" alt=""></a>
  <a href=""><img src="https://via.placeholder.com/80" alt=""></a>
  <a href=""><img src="https://via.placeholder.com/80" alt=""></a>
  <a href=""><img src="https://via.placeholder.com/80" alt=""></a>
  <a href=""><img src="https://via.placeholder.com/80" alt=""></a>
  <a href=""><img src="https://via.placeholder.com/80" alt=""></a>
</div>

Answer 1

以 .image-list 为目标并显示 flex 以及其他所需的属性；

.image-list a {
    display:flex;
    justify-content: center;
    align-items:center;
    }

您还需要使用 flex-direction:column；在 .image-list

上