My goal is to vertically align the text in the center of its row within a bootstrap table, regardless of its length.
I've been trying to achieve this using
vertical-align: middle; line-height: 90px;How can I vertically align the text in the right column to be centered vertically on the page?
Below is a snippet of my code :
.table-bordered th, tbody td:nth-child(2) {
vertical-align: middle;
line-height: 90px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737e7e65626563706151243f213f213c7374657020">[email protected]</a>/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 want the text to be centered in the row, similar to the image shown here, without the large line gap when the text spans two lines: https://i.sstatic.net/tljBZ.png