如何在 Bootstrap 表中垂直對齊文本

Question

無論文本在我的引導表中有多長，我都試圖將文本垂直對齊在其行的中心。

我正在嘗試使用vertical-align: middle; line-height:90px;來處理這個問題。 vertical-align: middle; line-height:90px; 目前調整行高似乎可行，並允許我在中心獲得文本，但如果文本是兩行，那么兩者之間的行間距太大。

如何垂直對齊右欄中的文本以垂直放置在頁面中間？

這是我的代碼片段：

 .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>

如果文本是兩行，我希望我的文本位於與這張照片相似的行的中心，沒有巨大的行間隙：

Answer 1

更改所需的表格數據元素以display: flex; , 制作flex-direction: column; 和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>