I've been attempting to center an image within a bootstrap4 table cell, but it keeps appearing on the left and even overlaps the border. I've tried adding inline styles like text-align: center; vertical-align: middle; both to the table cell HTML markup and the CSS for the image, but without success. I also attempted wrapping the image in a span with no change. Additionally, my image for (.row.NotCompleted) isn't displaying at all, even though the file path is correct and it's in the same folder as the one that is displaying properly under (.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;
}
Screenshot: