如何用HTML和CSS对齐页面中的两张Hero Image？

你的问题核心是错误地将flex容器属性（justify-content/align-items）应用在了单个元素上——这些属性仅对flex容器生效，直接加在块级的Hero Image上不会产生任何布局效果。而Flex布局恰好是解决这类多元素对齐、间距控制问题的最佳方案，以下是正确实现方式：

实现步骤 #

1. 给两个Hero Image包裹一个flex容器，由容器统一控制对齐和间距
2. 移除Hero Image上无效的布局属性，避免干扰容器的控制逻辑
3. 通过容器的gap属性精准设置元素间间距，无需手动调整margin破坏布局

修改后的完整代码 #

HTML #

<!-- 新增flex容器包裹两个Hero Image -->
<div class="hero-container">
  <div class="hero-image1">
    <div class="hero-text1">
      <h1>Our Bestsellers</h1>
      <a href="bestsellers.html"><button>Bestsellers</button></a>
    </div>
  </div>

  <div class="hero-image2">
    <div class="hero-text2">
      <h1>Our New Arrivals</h1>
      <a href="newarrivals.html"><button>New Arrivals</button></a>
    </div>
  </div>
</div>

CSS #

/* Flex容器：控制整体对齐和间距 */
.hero-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（可选，根据页面布局调整） */
  gap: 50px; /* 两个图片之间的间距 */
  margin: 20px 0; /* 与页面头部/下方内容的间距 */
}

.hero-image1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://galacticsabers.co/wp-content/uploads/2023/08/mattgallodesigns_the_planet_naboo_from_star_wars_hyper_realism__92ca62a7-f8f0-458f-a6a7-49c3120150de-1024x574.png");
}

.hero-image2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://i.pinimg.com/originals/00/84/89/0084892bd1326bdcb2cc597820af2fdf.png");
}

.hero-image1, .hero-image2 {
  width: 300px;
  height: 200px; /* 固定高度确保一致 */
  border-radius: 15px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin: 20px 0; /* 仅保留上下外边距，左右间距由容器gap控制 */
}

/* 图片内文本居中逻辑保持不变 */
.hero-text1, .hero-text2 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

关键说明 #

• hero-container作为flex容器，通过justify-content:center实现水平居中，gap:50px精准控制两个图片的间距
• 移除了Hero Image上无效的justify-content/align-items属性，避免冗余代码
• 保留height:200px确保两张图片高度完全一致
• 使用容器统一管理布局，后续调整间距或对齐方式只需修改容器属性，不会破坏整体页面结构

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