How to vertically align text in Bootstrap table

Question

I am attempting to vertically align my text in the center of its row regardless of how long the text is in my bootstrap table.

I am attempting to handle this with vertical-align: middle; line-height:90px; vertical-align: middle; line-height:90px; At the moment adjusting the line-height seems to work and allow me get text in the center but if the text is two-lines then the line-gap between the two is too large.

How can I vertically align my text in the right column to fit vertically be in the middle of the page?

Here is my code snippet:

 .table-bordered th, tbody td:nth-child(2) { vertical-align: middle; line-height: 90px; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-bordered"> <thead class="text-14 tx-light"> <tr class="d-flex"> <th class="col-6 blue-background" scope="col">LEFT</th> <th class="col-6 red-background" scope="col">RIGHT</th> </tr> </thead> <tbody class="text-18 tx-dark"> <tr class="d-flex"> <td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla. </td> <td class="col-6"> <a class="text-underlined-18 ul-link">Link to the described article here </a></td> </tr> <tr class="d-flex"> <td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla. </td> <td class="col-6"> <a class="text-underlined-18 ul-link">Link to longer url that takes up two lines here test test test test </a></td> </tr> <tr class="d-flex"> <td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla. </td>ib <td class="col-6"> <a class="text-underlined-18 ul-link"> Link to article here</a></td> </tr> </tbody> </table>

I am expecting my text to sit in the center of the row similar to this photo without the huge line gap if the text is two-lines:

Answer 1

Change the desired table data element to display: flex; , make the flex-direction: column; and justify-content: center; .

 .table-bordered th, tbody td:nth-child(2) { display: flex; flex-direction: column; justify-content: center; line-height: 90px; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-bordered"> <thead class="text-14 tx-light"> <tr class="d-flex"> <th class="col-6 blue-background" scope="col">LEFT</th> <th class="col-6 red-background" scope="col">RIGHT</th> </tr> </thead> <tbody class="text-18 tx-dark"> <tr class="d-flex"> <td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla. </td> <td class="col-6"> <a class="text-underlined-18 ul-ibisworld">Link to the described article here </a></td> </tr> <tr class="d-flex"> <td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla. </td> <td class="col-6"> <a class="text-underlined-18 ul-ibisworld">Link to longer url that takes up two lines here test test test test </a></td> </tr> <tr class="d-flex"> <td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla. </td> <td class="col-6"> <a class="text-underlined-18 ul-ibisworld"> Link to article here</a></td> </tr> </tbody> </table>