如何让 td 内容垂直对齐？

Question

使用 Jhipster v5.0.1 和 Angular v6.0.0.

目标

我想在我的 tds 中垂直对齐文本。

试试

我尝试简单地将 align-middle 添加到我的 table:

<table class="table table-striped text-center align-middle">

此处文本居中 class 有效但居中对齐无效。

尝试 2

我尝试直接更改 _tables.scss 中的样式如下：

th,
  td {
   padding: $table-cell-padding;
   vertical-align: middle;
   border-top: $table-border-width solid $table-border-color;
  }

随后，我做了一个yarn start来尝试更新样式。但是，不会考虑更改。

问题

我可以直接更改 table 中的 class 以垂直对齐吗？应用程序和浏览器如何检测 scss 的变化？

谢谢！

曼努埃拉

Answer 1

我想在我的 tds 中垂直对齐文本。 那你为什么要在 <table> 元素上使用那个 class？

您必须将 class 中间对齐添加到 td 元素，如下所示：

<table>
  <tbody>
    <tr>
      <td class="align-middle">middle</td>
    </tr>
  </tbody>
</table>

注意：<td class="align-middle"> doesn't work when the table class is <table class="table-responsive">

How to get td content vertically aligned?