如何用CSS/HTML（含Flexbox）实现图片下方文本居中对齐？

你的核心问题是HTML结构未分组，导致CSS无法精准关联图片与对应文本；同时选择器使用错误，>是子元素选择器，但<h1>、<p>是<img>的兄弟元素而非子元素，且flex-direction: auto是无效属性值。

步骤1：重构HTML结构（实现复用） #

给每张图片+对应文本套一个通用容器，添加image-card类，该类可直接复用在网站其他图片模块：

<section id="main-footer"> 
    <hr>
    <!-- 图片组1 -->
    <div class="image-card">
        <img src="images/image1.png" alt="image1" width="150" height="125">
        <h1>image1</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
    <!-- 图片组2 -->
    <div class="image-card">
        <img src="images/image2.png" alt="image2" width="150" height="125">
        <h1>image2</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
    <!-- 图片组3 -->
    <div class="image-card">
        <img src="images/image3.png" alt="image3" width="150" height="125">
        <h1>image3</h1> 
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
</section>

步骤2：移动端优先的CSS样式 #

先写移动端基础样式，再按需适配大屏：

/* 移动端优先：图片卡片容器 */
.image-card {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem; /* 卡片间添加间距 */
}

/* 图片继承父容器居中属性 */
.image-card img {
    display: inline-block;
}

/* 标题和段落居中，限制宽度提升移动端可读性 */
.image-card h1,
.image-card p {
    margin: 0.5rem auto;
    max-width: 90%;
}

/* 大屏适配（可选）：平板/桌面端改为多列布局 */
@media (min-width: 768px) {
    #main-footer {
        display: flex;
        gap: 1.5rem;
        justify-content: center;
        flex-wrap: wrap;
    }
    .image-card {
        width: calc(33.333% - 1rem); /* 三列均分宽度 */
    }
}

关键说明 #

1. 复用性：网站其他需相同效果的图片+文本模块，直接套用image-card容器即可，无需重复编写CSS。
2. 适配逻辑：基础样式默认移动端单列布局，文本限制最大宽度避免贴边；大屏通过媒体查询切换为多列，符合移动端优先原则。
3. 原CSS无效原因：
   • .image1 > h1：>选择子元素，但<h1>是<img>的兄弟元素，无法匹配。
   • #main-footer > h1, p：会选中#main-footer下所有<h1>及全局所有<p>，无法关联对应图片。

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