如何在表格td行中居中图片？Bootstrap布局问题

我已经通过Bootstrap的div结构实现了锁形图标的居中效果，但迁移到表格的td中后显示不符合预期。

原div实现代码： #

<div class="container-fluid">
<div class="row align-items-center exclusion-empty">
    <div class="col"></div>
    <div class="col-1 lock-circle">
        <span>
            <i class="fa-regular fa-lock-keyhole lock-icon"></i>
        </span>
    </div>
    <div class="col"></div>
</div>
</div>

对应CSS样式： #

.lock-circle[b-pzm1s2lx32] {
border-radius: 50%;
background-color: grey;
border: 3px solid white;
width: 4.25rem;
height: 4.25rem;
}

.exclusion-empty {
margin-top: 0.63rem;
height: 8.125rem;
flex-shrink: 0;
background: #F8F8F8;
}

.align-items-center {
align-items: center !important;
}

迁移到表格的尝试代码： #

<div class="table-responsive">
<table class="table">
    <thead>
        <tr>
            <th scope="col" class="col-3">
                Excluded candidate
            </th>
            <th scope="col" class="col-1">
                Votes to transfer
            </th>
            <th scope="col" class="col-3">
                Remaining candidates
            </th>
            <th scope="col" class="col col-width-1">
                Exc 1<br />total
                
            </th>
            <th scope="col" class="col col-width-1">
                Transfer <br />votes
            </th>
            <th scope="col" class="col col-width-1">
                Transfer % total
            </th>
            <th scope="col" class="col col-width-1">
                Excl 1 <br />total
            </th>
            <th scope="col" class="col col-width-1">
                Overall % total
            </th>
        </tr>
    </thead>
    <tbody>
    <tr class="exclusion-empty">
        <td colspan ="3"></td>
        <td colspan="2" class="lock-circle align-items-center ">
            <span>
                <i class="fa-regular fa-lock-keyhole lock-icon"></i>
            </span>
        </td>
        <td colspan ="3"></td>
    </tr>
    </tbody>
</table>
</div>

问题现象： #

锁形图标在合并后的td内未实现垂直和水平方向的完全居中，偏离了单元格的中心位置。

解决方案 #

原因分析：

原div结构依赖Bootstrap的row和col形成的flex布局实现居中，但表格的<td>默认不是flex容器，直接添加align-items-center无法生效，且表格单元格的布局规则与flex容器不同。

修改步骤：

1. 给包含图标的<td>添加flex布局相关类，将其转为flex容器并实现整体居中
2. 调整lock-circle的内部布局，确保图标在容器内也能居中

修改后的代码：

HTML部分：

<div class="table-responsive">
<table class="table">
    <thead>
        <tr>
            <th scope="col" class="col-3">
                淘汰候选人
            </th>
            <th scope="col" class="col-1">
                转移票数
            </th>
            <th scope="col" class="col-3">
                剩余候选人
            </th>
            <th scope="col" class="col col-width-1">
                淘汰1<br />总计
            </th>
            <th scope="col" class="col col-width-1">
                转移<br />票数
            </th>
            <th scope="col" class="col col-width-1">
                转移占比总计
            </th>
            <th scope="col" class="col col-width-1">
                淘汰1<br />总计
            </th>
            <th scope="col" class="col col-width-1">
                总体占比总计
            </th>
        </tr>
    </thead>
    <tbody>
    <tr class="exclusion-empty">
        <td colspan="3"></td>
        <!-- 给td添加flex布局类，实现单元格内整体居中 -->
        <td colspan="2" class="d-flex justify-content-center align-items-center">
            <div class="lock-circle">
                <span>
                    <i class="fa-regular fa-lock-keyhole lock-icon"></i>
                </span>
            </div>
        </td>
        <td colspan="3"></td>
    </tr>
    </tbody>
</table>
</div>

CSS调整：

为lock-circle添加内部居中样式，确保图标在圆形容器内也能居中：

.lock-circle[b-pzm1s2lx32] {
border-radius: 50%;
background-color: grey;
border: 3px solid white;
width: 4.25rem;
height: 4.25rem;
/* 内部居中 */
display: flex;
align-items: center;
justify-content: center;
}

.exclusion-empty {
margin-top: 0.63rem;
height: 8.125rem;
flex-shrink: 0;
background: #F8F8F8;
}

说明：

• d-flex：将td设置为flex容器，启用flex布局
• justify-content-center：实现水平方向居中
• align-items-center：实现垂直方向居中
• 把lock-circle放在td内部的独立div中，避免colspan属性干扰样式，同时利用flex容器特性完成多层居中

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