如何在 bootstrap 5 表格单元格中垂直对齐文本？

Question

我创建了一个表格，我希望其中一个单元格垂直对齐。 bootstrap 5 文档states:

使用vertical-alignment改变元素的对齐方式 公用事业。请注意，垂直对齐只影响内联， 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>。结果相同。由于表格元素的水平对齐，我需要class="row" 在我的tr 中。如何在我的第一个单元格中仍然获得垂直对齐的项目？

Answer 1

我假设您的意思是水平居中和垂直居中，对吧？

正如 cmets 中已经指出的，将表与 Bootstrap 的 row 类混合会导致对齐项目的问题。

但是，如果你想保持当前布局不变，你可以在类row的元素上使用display: contents。这使得子元素的位置相对于元素的父元素。阅读更多文档here。

你修改后的sn-p：

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/，它说明了 Bootstrap 5 中项目和项目容器的垂直对齐方式。 您可以使用相同的属性来设置表格单元格和该表格单元格中的项目的对齐方式。

干杯，享受发展