如何在锚点元素中居中图片且保持元素间距？

核心是把间距控制在锚点元素（<a>）上，同时让图片在锚点内部实现居中，这样就不会破坏锚点之间的原有间距。

修改后的完整代码 #

CSS部分 #

.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 a {
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.image-list img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

HTML部分（无需修改） #

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

关键调整说明 #

1. 转移间距到锚点：把原本加在<img>上的margin-right和margin-bottom移到<a>标签上，锚点之间的间距由自身控制，不会因为调整图片对齐而被压缩。
2. 锚点设置为flex容器：给<a>添加display: inline-flex，再通过justify-content: center和align-items: center让内部图片在锚点盒子里水平、垂直双居中。
3. 锚点尺寸匹配图片：给<a>设置和图片一致的宽高，确保居中的容器范围精准，避免多余空白。

这样修改后，图片会在对应的锚点盒子里居中显示，同时锚点之间的10px间距保持不变，完全满足需求。

内容的提问来源于stack exchange，提问作者ᏨᎨᎾᏰᎯᏁᏬ ЯѲβЄЯƬ