如何实现三个div标题与下方对应图片的居中对齐？

你需要实现三列（每列包含标题和对应图片）在同一行，且每列内部标题与图片居中对齐。之前的代码存在几处关键错误导致中间元素无法正常对齐，下面是修正后的完整代码及说明：

修正后的CSS代码 #

body {
  background-color: #FFFDD0;
}
header {
  text-align: center;
}
img {
  border: 2px black groove;
  width: 200px;
  height: 150px;
  padding: 0;
  display: block;
  margin: 0 auto; /* 确保图片在父容器内水平居中 */
}
a {
  text-decoration: none;
  color: black;
}
/* 每一列的统一容器样式 */
.version-column {
  text-align: center;
  flex: 1; /* 让每列平分容器可用宽度 */
}
/* 外层容器用Flex实现三列同行布局 */
.version-container {
  display: flex;
  justify-content: space-around; /* 三列均匀分布在容器内 */
  width: 100%;
}
h3 {
  margin: 0 0 8px 0; /* 给标题和图片之间添加少量间距 */
}

修正后的HTML代码 #

<header>
    <h1>Brent Tracker Version Log</h1>
</header>
<article class="version-container">
    <div class="version-column">
        <h3>Version 1</h3>
        <a href=""> <img src="https://picsum.photos/200/300?grayscale"></a>
    </div>
    <div class="version-column">
        <h3>Version 2</h3>
        <a href=""> <img src="https://picsum.photos/seed/picsum/200/300"></a>
    </div>
    <div class="version-column">
        <h3>Version 3</h3>
        <a href=""> <img src="https://picsum.photos/200/300?blur"></a>
    </div>
</article>

关键修改点说明 #

• 用Flex布局替代原有的float和margin:auto方案：外层容器.version-container设置display: flex，可直接让子元素在同一行排列，justify-content: space-around保证三列均匀分布，无需手动调整边距。
• 给每列添加统一类.version-column，设置flex:1让三列平分容器宽度，确保布局整齐一致。
• 给图片添加margin:0 auto，确保图片在列容器内水平居中，与上方标题对齐。
• 删除原代码中错误的display: absolute（正确属性为position: absolute，且此处完全不需要定位布局），避免破坏正常文档流。

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