如何用HTML和CSS实现每行3-4个带上方标题的图片对齐？

方案1：CSS Grid（推荐，控制每行数量更直观） #

这是实现需求最简洁的方式，能轻松控制每行显示3-4个元素，同时保证标题居中、间距合理：

HTML结构

<div class="image-gallery">
  <figure class="gallery-item">
    <figcaption>图片标题1</figcaption>
    <img src="your-image-url.jpg" alt="图片描述1">
  </figure>
  <figure class="gallery-item">
    <figcaption>图片标题2</figcaption>
    <img src="your-image-url.jpg" alt="图片描述2">
  </figure>
  <figure class="gallery-item">
    <figcaption>图片标题3</figcaption>
    <img src="your-image-url.jpg" alt="图片描述3">
  </figure>
  <figure class="gallery-item">
    <figcaption>图片标题4</figcaption>
    <img src="your-image-url.jpg" alt="图片描述4">
  </figure>
  <!-- 更多图片项 -->
</div>

CSS样式

.image-gallery {
  display: grid;
  /* 每行最多4个元素，每个元素最小宽度250px，剩余空间自动分配 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* 元素之间的间距 */
  gap: 2rem;
  padding: 1rem;
}

.gallery-item {
  /* 标题居中对齐 */
  text-align: center;
  margin: 0;
}

.gallery-item figcaption {
  /* 标题与图片的间距 */
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.gallery-item img {
  /* 图片自适应容器宽度 */
  width: 100%;
  height: auto;
  border-radius: 4px; /* 可选：给图片加圆角 */
}

如果需要固定每行3个，把grid-template-columns改成：

grid-template-columns: repeat(3, 1fr);

方案2：CSS Flexbox #

如果之前用Flex失败，大概率是没开启换行或没给子元素合适的宽度，调整后即可实现需求：

CSS样式

.image-gallery {
  display: flex;
  flex-wrap: wrap; /* 必须开启换行 */
  gap: 2rem;
  padding: 1rem;
}

.gallery-item {
  flex: 1 1 22%; /* 控制每行最多4个，剩余空间自动伸缩 */
  /* 如果要每行3个，改成flex: 1 1 30%; */
  text-align: center;
  margin: 0;
}

/* 其他样式和Grid方案一致 */
.gallery-item figcaption {
  margin-bottom: 0.5rem;
}

.gallery-item img {
  width: 100%;
  height: auto;
}

为什么之前的方案失败？ #

• 表格布局：表格是为二维数据设计的，无法灵活响应容器宽度调整每行数量，且默认样式难以适配这种流式布局需求。
• Flexbox失败：大概率是未设置flex-wrap: wrap，导致元素无法换行；或者子元素未设置合适的flex-basis/宽度，导致挤压或溢出。
• float方案：需要手动清除浮动，且在响应式场景下难以控制每行数量，元素间距也容易出现异常。

内容的提问来源于stack exchange，提问作者João Góes