我创建了一个表格，我希望其中一个单元格垂直对齐。 Bootstrap 5 文档states:
使用垂直对齐更改元素的对齐方式
公用事业。请注意，垂直对齐仅影响内联，
内联块、内联表、和表格单元格元素
我只是做了一个小比较表，来展示我的混乱：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>。相同的结果。我需要它class="row" in my tr由于表格元素的水平对齐。我怎样才能在第一个单元格中获得垂直对齐的项目？
我想你的意思是水平居中和垂直居中，对吧？
正如评论中已经指出的，将表格与 Bootstrap 混合row类会导致项目对齐问题。
But, if你想保持当前的布局不变，你可以使用display: contents在有类的元素上row。这使得子元素的位置相对于元素的父元素。在文档中阅读更多内容here.
您修改后的代码片段：
tr.row {
display: contents
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
