想要实现双英雄图水平居中且等高对齐的效果？本文将通过CSS Flexbox技术，教你如何完美解决这一常见布局难题。

在构建首页（index.html）时，将两个视觉突出的hero-image并列居中展示是提升首屏吸引力的常见设计需求。但很多开发者会遇到这样的困惑：直接在.hero-image1和.hero-image2上设置justify-content或align-items属性完全无效。这是因为justify-content和align-items是容器级属性，只能作用于其直接子元素的布局。hero-image本身是普通块级元素，并非Flex容器，这些声明自然会被浏览器忽略。

正确的解决方法是：创建一个父级Flex容器来统一管理两个英雄图的排列逻辑。以下是经过验证的完整实现方案：

✅ 推荐方案：Flex 容器 + justify-content: center + gap

/* 新增：统一包裹容器 */
.hero-section {
  display: flex;
  justify-content: center;   /* 水平居中整个 flex 行 */
  align-items: flex-start;   /* 垂直对齐顶部（确保两图上沿对齐） */
  gap: 50px;                 /* 精确控制两图之间间距（替代 margin hack） */
  padding: 40px 20px;        /* 可选：为整体留白，避免紧贴 header 或边缘 */
  flex-wrap: wrap;           /* 响应式友好：小屏自动换行 */
}

/* 保留原有样式，但移除无效的 justify-content / align-items */
.hero-image1,
.hero-image2 {
  width: 300px;
  height: 200px;
  border-radius: 15px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.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-text1,
.hero-text2 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

  

    

      
Our Bestsellers
      Bestsellers
    
  
  

    

      
Our New Arrivals
      New Arrivals
    
  

⚠️ 关键注意事项

1. 不要给子图加 margin 或 padding 来"手动对齐"：这会破坏 Flex 的计算逻辑，导致错位或响应异常；
2. gap 是现代标准：相比 margin，gap 更安全、语义清晰，且不会影响容器尺寸计算（兼容 Chrome 84+/Firefox 63+/Safari 14.1+）；
3. align-items: flex-start 是关键：它确保两个 hero 图的顶部严格对齐（而非默认的 stretch 拉伸），符合"同一高度"的需求；
4. 响应式增强建议：可在媒体查询中添加 flex-direction: column，使小屏下垂直堆叠，提升可读性：

   @media (max-width: 768px) {
     .hero-section {
       flex-direction: column;
       align-items: center;
       gap: 30px;
     }
   }

? 替代方案（按场景选用）

通过本文介绍的方法，你可以轻松实现双英雄图的完美对齐效果，告别布局调试的烦恼，让网页设计更加专业美观。