如何仅用HTML和CSS实现两张图片水平居中？现有代码无效

你当前的CSS代码中，justify-content: space-between会让容器内的元素沿水平方向两端对齐，这是导致无法居中的核心原因。只需调整flex属性即可实现需求：

修改后的CSS代码 #

#product .container {
  display: flex;
  justify-content: center; /* 替换为center实现水平居中 */
  gap: 20px; /* 可选：设置两张图片的间距，避免紧贴 */
  flex-wrap: wrap;
  width: 100%; /* 确保容器占满父元素宽度，保证居中范围正确 */
}

对应的HTML结构示例 #

<section id="product">
  <div class="container">
    <img src="你的图片1地址" alt="图片1说明">
    <img src="你的图片2地址" alt="图片2说明">
  </div>
</section>

关键说明 #

• justify-content: center：使flex容器内的子元素（图片）在水平方向上居中对齐
• gap：可根据视觉需求调整数值，控制两张图片之间的间距
• width: 100%：确保容器宽度覆盖可用空间，让居中效果基于页面整体宽度生效

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