how to vertically align a text in a bootstrap 5 table cell?

Question

I created a table and I want one of the cells to have a vertical alignment. The bootstrap 5 documentation states :

Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements

I just made a small comparison table, to demonstrate my disarray:

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

So why does the first table not have a vertically correctly aligned text like the second one?

I also tried to add a flex box: <div class="d-flex align-items-center">...</div> . Same result. I need that class="row" in my tr because of horizontal alignment of table elements. How can I still get vertical aligned items in my first cell?

Answer 1

I assume you mean both horizontal and vertical centering, right?

As already pointed out in the comments, mixing tables with Bootstrap's row class causes issues with aligning items.

But, if you want to keep the current layout as it is, you could use display: contents on the element with class row . This makes the children position relative to the parent of the element. Read more in the docs here .

Your modified snippet:

 tr.row { display: contents }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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">now 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>

Answer 2

I don't let you wait for the correct answer but till that time you must look upon the following [1]: https://getbootstrap.com/docs/5.0/utilities/vertical-align/ which states the Vertical Alignment of item and item container in Bootstrap 5. You can use the same property to set the alignment for the table cell and item in that table cell.

Cheers and Enjoy Development