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

Question

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

3

我创建了一个表格，我想让其中一个单元格垂直对齐。Bootstrap 5文档说明：

使用垂直对齐实用工具更改元素的对齐方式。请注意，垂直对齐仅影响内联，内联块，内联表格和表格单元格元素

我刚刚做了一个小比较表，以展示我的混乱：

<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>。结果相同。由于需要水平对齐表格元素，我需要在我的tr中使用class="row"。如何才能使第一个单元格中的项目仍然垂直对齐？

- xtlc

1

我猜想是因为您在<tr>标签上设置了"row"类。这将把<tr>设置为"display: flex"，导致其子元素（即表格单元格）的行为就像它们是"display: block"一样。"align-middle"类设置了"vertical-align: middle"，但只适用于"display: inline"或"display: table-cell"元素。（Bootstrap的"row"类与表格无关。） - Ouroborus

你说你需要那个 row 类来进行水平对齐，但它似乎也会搞砸这一点。 - tromgy

你试过在tr元素中添加align-items-center吗？ - dale landry

@dalelandry 这实际上可以正确地对齐单元格中的文本，但是背景现在仅限于文本区域。我认为我需要一个 <td> 宽度的解决方案。 - xtlc

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gru · Answer 1

我猜你是指水平和垂直居中，对吗？

正如评论中已经指出的那样，将表格与Bootstrap的row类混合使用会导致对齐项目的问题。

但是，如果您想保持当前的布局不变，可以在具有row类的元素上使用display: contents。这使得子元素相对于元素的父元素定位。在文档这里中了解更多信息。

您修改后的代码片段：

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>

- codename-SAMY · Answer 2

我不会让你等待正确的答案，但在那之前，你必须查看以下内容[1]: https://getbootstrap.com/docs/5.0/utilities/vertical-align/，其中说明了Bootstrap 5中项目和项目容器的垂直对齐方式。您可以使用相同的属性来设置表格单元格和其中的项目的对齐方式。

祝贺并享受开发！