使用Flexbox实现容器内列居中：图片尺寸设置后左移及边距问题求助

问题描述 #

我想用Flexbox让3张图片在屏幕居中显示，但设置图片尺寸后，所有图片都向左偏移，还没法去除边距。

• 预期效果：图片及下方文字整体居中，每张内容都在屏幕中央对齐
• 当前效果：图片整体向左偏移，左侧存在明显默认边距

我的代码如下：

CSS代码 #

.collection {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
 
}

HTML代码 #

<ul class="collection">
        <li><a href="#"><img class="col-img" src="images/bouquets.jpeg" alt=""><p class="col-text">Букети</p></a></li>
        <li><a href="#"><img class="col-img" src="images/natural_flowers.jpeg" alt=""><p class="col-text">Живі квіти</p></a></li>
        <li><a href="#"><img class="col-img" src="images/own_bouquet.png" alt=""><p class="col-text">"Свій" букет</p></a></li>
</ul>

解决方法 #

问题根源是浏览器默认给<ul>标签加了padding-left，同时行内元素特性可能导致图片对齐异常，按以下步骤修改即可：

1. 清除<ul>默认内边距
   给.collection添加padding: 0，直接消除左侧默认边距：

.collection {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0; /* 清除ul默认内边距 */
}

2. 修正图片显示方式
   给图片设置display: block，避免行内元素带来的下方间隙，同时可自定义尺寸：

.col-img {
  display: block;
  /* 示例尺寸，可按需调整 */
  width: 250px;
  height: auto;
}

3. 统一链接和列表项布局
   让<a>标签变为块级元素，并设置文字居中，确保图片和下方文字都能居中对齐：

.collection a {
  display: block;
  text-align: center;
}

完成以上修改后，图片和文字会整体居中，默认边距也被清除，和预期效果一致。

内容的提问来源于stack exchange，提问作者Natusya Zira