如何在HTML中实现两张图片并排且下方各对应文字

当前布局中.container未设置横向排列规则，导致两个图片+文字模块默认上下堆叠。要实现左右并排、中间留间距且文字对应图片下方的效果，用Flexbox布局是最便捷的方案，修改代码如下：

修改后的完整代码 #

CSS #

.container {
  color: white;
  text-align: center;
  margin-top: 7.5%;
  font-family: 'JelleeBold';
  font-weight: normal;
  font-style: normal;
  /* 启用Flex布局 */
  display: flex;
  /* 设置模块间的间距，可根据需求调整数值 */
  gap: 2rem;
  /* 让模块在容器内水平居中 */
  justify-content: center;
  /* 屏幕较窄时自动换行，避免挤压 */
  flex-wrap: wrap;
}

img {
  width: 100%; /* 图片自适应父容器宽度 */
}

/* 控制每个模块的宽度，避免图片过大 */
.item1, .item2 {
  flex: 0 1 20%; /* 基础宽度20%，空间不足时可缩小 */
}

HTML #

<div class="container">
  <div class="item1">
    <img src="D:\DesktopStuff\Programming\Premier League Predictions\junk\Dark Pink Morning Routine Tutorial YouTube Thumbnail (1).png" alt="Week-by-Week Prediction">
    <p>Week-by-Week Prediction</p>
  </div>
  <div class="item2">
    <img src="D:\DesktopStuff\Programming\Premier League Predictions\junk\Dark Pink Morning Routine Tutorial YouTube Thumbnail (2).png" alt="Season Prediction">
    <p>Season Prediction</p>
  </div>
</div>

关键属性说明 #

• display: flex：将容器转为Flex布局，内部元素默认横向排列。
• gap: 2rem：直接定义两个模块之间的间距，比用margin更简洁易维护。
• justify-content: center：让模块在容器内水平居中，若需要模块靠两端对齐，可替换为justify-content: space-between（需容器有足够宽度）。
• flex: 0 1 20%：设置模块基础宽度为20%，0表示不放大，1表示空间不足时允许缩小，保证小屏幕下的布局兼容性。
• img { width: 100% }：让图片充满所在模块，避免溢出或留白。

内容的提问来源于stack exchange，提问作者Declan Davies