I am trying to achieve vertical alignment in one of the cells of a table I created. According to the Bootstrap 5 documentation, the vertical-alignment utilities only affect certain elements like inline, inline-block, inline-table, and table cell elements.
To illustrate my confusion, here is a small comparison table:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1849f819f83">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c7dcc2dcc0">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-dark">
<tbody id="table">
<tr class="row">
<td class="col-sm-2 align-middle">not aligned</td>
<td class="col-sm-1">
<button>
<div class="row">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Flag_of_Papua_New_Guinea.svg/320px-Flag_of_Papua_New_Guinea.svg.png" width="64px" height="48px">
</div>
</button>
</td>
<td class="col-sm-9" colspan="9"></td>
</tr>
</tbody>
</table>
<table class="table table-dark">
<tbody>
<tr>
<td class="col-sm-2 align-middle">aligned</td>
<td class="col-sm-1">
<button>
<div class="row">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Flag_of_Papua_New_Guinea.svg/320px-Flag_of_Papua_New_Guinea.svg.png" width="64px" height="48px">
</div>
</button>
</td>
<td class="col-sm-9" colspan="9"></td>
</tr>
</tbody>
</table>Despite my efforts, the text in the first table cell remains not vertically aligned like the second one. I even attempted using a flex box with
<div class="d-flex align-items-center">...</div>class="row" in my tr for horizontal alignment complicates achieving vertical alignment. How can I resolve this issue and vertically align items in the first cell?