如何在flex布局的BorderBox容器内图片上方添加标题？

问题根源 #

innerLogo 和 innerLogo2 容器设置了 display: flex（默认横向排列），直接在图片的父div里加标题后，标题会和图片横向并排，导致标题出现在图片左侧。

具体修改步骤 #

1. 修正HTML结构，添加标题并统一类名

把重复的id="certImg"改成类名（id不能重复），同时在每个图片容器内添加标题：

<div id="cert"> 
   
    <div id="wrapper4">
     
        <div id="innerLogo">
            <!-- 给每个图片+标题的容器加类名cert-item -->
            <div class="cert-item">
                <h3>CCNA</h3>
                <img src="./img/ccna.png" class="certImg"/>
            </div>
            <div class="cert-item">
                <h3>Linux</h3>
                <img src="./img/linux.png" class="certImg"/>
            </div>
            <div class="cert-item">
                <h3>Azure</h3>
                <img src="./img/azure.png" class="certImg"/>
            </div>
        </div>
        <div id="innerLogo2">
            <div class="cert-item">
                <h3>JavaScript</h3>
                <img src="./img/javascript-1.png" class="certImg"/>
            </div>
            <div class="cert-item">
                <h3>Python</h3>
                <img src="./img/python.png" class="certImg"/>
            </div>
            <div class="cert-item">
                <h3>PowerShell</h3>
                <img src="./img/powershell.png" class="certImg"/>
            </div>
        </div>

    </div>
</div>

2. 修改CSS样式，实现标题在上、图片在下的垂直布局

• 给.cert-item设置垂直flex布局，让标题和图片上下排列，并居中对齐
• 调整innerLogo和innerLogo2的冗余样式，保留必要的flex属性
• 把原#certImg改成.certImg（因为改成了类名）

#cert {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    box-sizing: border-box;
    display: flex;
    justify-content: left;
}

#wrapper4 {
    width: auto;
    display: flex;
    justify-content: space-evenly;
}

#innerLogo, #innerLogo2 {
    width: 490px;
    padding: 20px;
    margin-right: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; /* 保持三个item横向均匀分布 */
    background-color: #dfdfdf;
    border-radius: 20px;
}

/* 去掉innerLogo2的单独margin，统一用上面的选择器 */
#innerLogo2 {
    margin-right: 0;
    padding: 25px;
}

/* 每个证书项的垂直布局 */
.cert-item {
    display: flex;
    flex-direction: column; /* 垂直排列标题和图片 */
    align-items: center; /* 内容居中 */
    text-align: center; /* 标题文字居中 */
}

.certImg {
    width: 140px;
    height: 140px;
    margin-top: 8px; /* 标题和图片之间加间距 */
}

/* 可选：调整标题样式，比如字体大小 */
.cert-item h3 {
    margin: 0;
    font-size: 14px;
}

效果说明 #

修改后，每个证书的标题会垂直排列在图片上方，同时innerLogo和innerLogo2内的三个证书项依然保持横向均匀分布，符合预期布局。

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