htmlcssbootstrap-5

How to center an image in a table td row?

How to center an image in a table row. Currently I have a div like this in bootstrap:

enter image description here

<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>

with 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;
}

I tried using like this in a table:

<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>

This is producing output like this:

enter image description here

Solution
    1. For the table row, you need to adjust your approach to centering content in a table cell.
    2. Bootstrap's align-items-center works for flexbox containers but not directly for table cells

            .exclusion-empty {
        height: 8.125rem;
        background: #F8F8F8;
    }
    
    .lock-circle {
        width: 70px;
        height: 70px;
        background-color: rgba(237, 231, 246, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .lock-icon {
        color: #6A1B9A;
        font-size: 24px;
    }
     <div class="table-responsive">
        <table class="table">
        <!-- Your thead remains the same -->
        <tbody>
        <tr class="exclusion-empty">
            <td colspan="3"></td>
            <td colspan="2" class="text-center align-middle">
                <div class="lock-circle mx-auto d-flex justify-content-center align-items-center">
                    <i class="fa-regular fa-lock-keyhole lock-icon"></i>
                </div>
            </td>
            <td colspan="3"></td>
        </tr>
        </tbody>
    </table>
    </div>