使用Bootstrap实现DIV内文本居中（图片下方）

直接用Bootstrap自带的布局类就能快速实现，无需额外编写自定义CSS。修改后的代码如下：

<div class="container">
    <div class="row">
        <div class="col">
            <a href="/abrircampanha" class="d-flex flex-column align-items-center">
                <img src="../images/IconAbrirCampanha.png" class="img-thumbnail" alt="Abrir">
            </a>
        </div>
        <div class="col">
            <a href="/abrircampanha" class="d-flex flex-column align-items-center">
                <img src="../images/IconNovaCampanha.png" class="img-thumbnail" alt="Abrir">
                <h3 class="h6 mb-3"> Abrir campanha </h3>
            </a>
        </div>
    </div>
</div>

核心类作用说明： #

• d-flex：将<a>标签转换为flex容器
• flex-column：让容器内的图片和文本垂直堆叠排列
• align-items-center：使子元素（图片、文本）在水平方向上居中对齐

如果偏好非flex的实现方式，也可以用以下写法：

<a href="/abrircampanha" class="d-block text-center">
    <img src="../images/IconNovaCampanha.png" class="img-thumbnail" alt="Abrir">
    <h3 class="h6 mb-3"> Abrir campanha </h3>
</a>

这里d-block让<a>标签成为块级元素，text-center直接让内部所有内容水平居中。

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