如何在 bootstrap 5 表格單元格中垂直對齊文本？

Question

我創建了一個表格，我希望其中一個單元格具有垂直 alignment。 bootstrap 5 文檔指出：

使用垂直對齊實用程序更改元素的 alignment。 請注意，vertical-align 僅影響 inline、inline-block、inline-table和表格單元格元素

我只是做了一個小比較表，以展示我的混亂：

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

那么為什么第一個表格沒有像第二個表格那樣垂直正確對齊的文本呢？

我還嘗試添加一個彈性框： <div class="d-flex align-items-center">...</div> 。 結果相同。 由於表格元素的水平 alignment ，我在我的tr中需要那個class="row" 。 我怎樣才能在我的第一個單元格中獲得垂直對齊的項目？

Answer 1

我假設您的意思是水平居中和垂直居中，對嗎？

正如評論中已經指出的那樣，將表與 Bootstrap 的row class 混合會導致對齊項目的問題。

但是，如果您想保持當前布局不變，您可以在元素上使用display: contents和 class row 。 這使得子元素 position 相對於元素的父元素。 在此處的文檔中閱讀更多信息。

您修改后的代碼段：

 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

我不會讓您等待正確的答案，但在那之前您必須查看以下內容 [1]： https://getbootstrap.com/docs/5.0/utilities/vertical-align/說明項目的垂直 Alignment和 Bootstrap 5 中的項目容器。您可以使用相同的屬性為表格單元格和該表格單元格中的項目設置 alignment。

干杯，享受發展