参考Petzl网站，实现三个<div>元素横向居中排列求助

需求：参考某网站布局，让包含“Services”“Training”“Shop”的三个<div>横向居中排列在同一行。此前尝试inline-block、padding、margin、float等属性未达预期；移除place-content:center后元素左对齐且间距过大。

原代码问题分析 #

1. .image容器中justify-content:middle是无效值，正确值应为center；
2. .training类设置padding-right:1500px会导致元素溢出，完全打乱布局；
3. 子元素内的<img>使用position:absolute但父元素未设置position:relative，导致图片相对于整个视口定位，而非父容器；
4. HTML中class="Training"与CSS中.training类名大小写不一致，样式无法正确应用；
5. 用inline-block实现横向排列时，未处理元素间的空白间隙，且依赖place-content:center维持居中，移除后布局失效。

修改后的完整代码 #

<style>
.image{
  height: 800px;
  width: 100%;
  /* 使用Flex布局实现子元素横向居中、垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 30px;
  background-color: #000; /* 补充合法背景色值 */
  background-position: center;
  background-size: cover;
  /* 子元素之间的间距 */
  gap: 80px; 
}

/* 统一三个区块的样式 */
.image > div {
  position: relative; /* 让内部绝对定位元素以当前div为基准 */
  width: 150px; /* 调整合适宽度 */
  text-align: center; /* 文字居中 */
}

.image > div img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.3s ease; /* 添加过渡动画更平滑 */
}

.image > div span {
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: inline-block;
  padding: 10px 0; /* 增加点击区域 */
}

.image > div span:hover + img {
  opacity: 1;
}
</style>

<div class="image">
  <div class="services">
    <span onclick="window.location=''">Services</span>
    <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> 
  </div>
  
  <div class="training">
    <span onclick="window.location='beta.edgerope.com/courses'">Training</span>
    <img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg">
  </div>
  
  <div class="shop">
    <span onclick="window.location='beta.edgerope.com/shop'">Shop</span>
    <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ">
  </div>
</div>

关键修改说明 #

• 改用flex布局：.image设置display:flex; justify-content:center; align-items:center;，直接实现子元素横向居中+垂直居中，无需依赖inline-block和复杂的边距控制；
• 用gap属性控制子元素间距：替代原不合理的padding，布局更可控；
• 父容器设置position:relative：确保内部图片仅覆盖当前区块，不会溢出到页面其他区域；
• 修正类名大小写：保持HTML与CSS类名一致，保证样式生效；
• 补充背景色值：原代码background-color: #;无效，补充合法值（示例用黑色）；
• 添加过渡动画：鼠标悬停时图片显示更平滑。

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