我正在制作一個<table >帶有列和行的引導表，如下所示：
<tr class="d-flex">
<td class="col">Voornaam</td>
<td class="col">Sean</td>
</tr>
但是如果我想align-items:center或align-self:center，它看起來像這樣： 居中的td元素具有部分背景
現在我認為，問題在于方式引導應用表格條紋類，因為選擇是.table > :not(caption) > * > * {與box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);與選組合.table-striped > tbody > tr:nth-of-type(odd) {和--bs-table-accent-bg: var(--bs-table-striped-bg);。我使用背景顏色： rgb(190, 225, 130) !important; 在我自己的 css 中的 .table 類上，但它似乎不會導致問題（因為我沒有測驗過）
我已經搜索得很好，似乎無法找到一種方法來確保 td 填充 flexbox 中 tr 的整個高度，這將使背景順利應用。這是我第一次使用 bootstrap，所以我希望我足夠清楚。在此先感謝您提供任何提示和解決方案！
uj5u.com熱心網友回復：
該d-flex被覆寫默認<tr>顯示型別。
如果您希望<td>s 垂直對齊，您可以執行以下操作：
<table class="table table-striped table-hover table-bordered text-break border-light text-center my-4">
<tr>
<td class="align-middle">Voornaam</td>
<td class="align-middle">Sean</td>
</tr>
</table>
參考：
- https://getbootstrap.com/docs/5.0/content/tables/#vertical-alignment
- https://getbootstrap.com/docs/5.0/utilities/vertical-align/
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/337341.html
標籤：html css 弹性盒 bootstrap-5