как вписать изображение в середину ячейки таблицы

Question

Я пытаюсь отобразить изображение в центре моей ячейки таблицы bootstrap4, но оно отображается слева от ячейки и даже перекрывает границу. Я попытался добавить встроенные стили в ячейку таблицы html разметка т.е. text-align: center; вертикально-Align: средний; а также css для изображения, но безрезультатно. Я попытался обернуть в span и все тот же результат. Кроме того, мое изображение для (.row.NotCompleted) не отображается вообще, но путь указан правильно, поскольку он находится в той же папке, что и отображаемая (.row.Completed)

HTML

<div class="table-responsive container-fluid">
    <table class="table table-bordered table-hover">
        <thead>
            <tr class="">
                <th scope="col" colspan="4">Please review your biographical information and update any missing information:</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="width:50px; text-align:center; vertical-align:middle; white-space:nowrap;">
                   <span><img class="row @PreferredNameRowStatus" /></span>
                </td>
                <td>Preferred Name:</td>
                <td class="itemValue">@Model.PreferredName</td>
                <td>
                    <a id="PreferredNameLnk" href="#">Click Here to Update</a><br />
                </td>
            </tr>
            <tr>
</table>
</div>

CSS

.row.Completed {
        background-image: url("/images/Completed.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: block;
    }

    .row.NotCompleted {
        content: url('/images/Notcomplete.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        /* display set to block element */
        display: block;
        /*width: 100%;  */
        height: 100%;
    }

td img {
    max-width: 100%;
    height: auto;
}

Снимок экрана: