如何实现文本对齐显示在div盒子的外部下方位置

文本显示在带蓝色边框的盒子内部，是因为你直接给包裹了文本的.image容器设置了固定height: 150px和边框样式，子元素文本自然被限制在这个容器的边框范围内，无法显示到外部。

不需要修改现有HTML结构，仅调整CSS规则即可实现效果：

• 将原本设置在.image上的边框、固定宽高属性，迁移到它内部的.img子元素上，让蓝色边框仅包裹图片占位区域
• 移除.image的固定高度限制，给图片和下方文本增加适当间距，同时将span设置为块级元素避免排版异常

调整后的完整CSS代码如下：

.title{
    text-align: center;
    font-size:36px;
    font-weight: bolder;
    color: #1F2937;
    margin-top: 45px;
}

.second_container{
    display: flex;
    justify-content: center;
    padding: 30px 0px;
    gap:32px; 
}

.image{
    width: 150px;
    text-align: center;
}

.image .img{
    border: 4px solid dodgerblue;
    border-radius: 8px;
    width: 150px;
    height: 150px;
    margin-bottom: 8px;
}

span.txt{
    font-size: 18px;
    display: block;
}

应用上述样式后，蓝色边框会仅包裹150*150的图片占位块，说明文本会自动显示在边框盒子的外部下方，居中对齐，符合预期效果。

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