html - 使 Bootstrap 4 中的 flex 类占据表格单元格父级的全高

Question

我正在使用 Bootstrap 4 CSS 和 JS(来自官方 CDN)，以及 Font Awesome 5(也是官方 CDN)。

我最初使用的是来自 Bootstrap 的 text-center 类，因为 FA5 图标只是文本。然后我尝试使用 text-justify 使图标在较大宽度的显示器上更好地分散，但这根本不起作用。

这是标记的表格单元格部分。我不想将整个内容粘贴在这里，因为模板 (Jinja2) 相当长。

<td>
  <div class="container-fluid d-flex justify-content-between">
    <i class="fas fa-fw fa-chevron-up"></i>
    <i class="fas fa-fw fa-chevron-down"></i>
    <i class="fas fa-fw fa-star"></i>
  </div>
</td>

表格单元格按预期显示，只是它不是全高且图标看起来偏离中心。

有没有人有一个相当简单的方法来使 d-flex 元素使用父单元格的整个高度？或者只是一种更好的方式，使赞成票、反对票和最喜欢的图标适合表格单元格？我还需要找出一种方法，使当前分数/收藏夹编号与表格中的所有其他单元格保持一致。您现有的任何解决方案或建议也会非常有帮助。

编辑:作为事后的想法，我应该补充一点，如果这会有所作为，这些图标最终将位于按钮内部。

谢谢。

Answer 1

使用 align-items-center Bootstrap 类来对齐单元格的元素中心。如果您使用了任何自定义行高，请将其删除。

<td>
      <div class="container-fluid d-flex justify-content-between align-items-center">
        <i class="fas fa-fw fa-chevron-up"></i>
        <i class="fas fa-fw fa-chevron-down"></i>
        <i class="fas fa-fw fa-star"></i>
      </div>
    </td>

注意:我不清楚这个问题。我给出了将您的 fa 图标垂直居中对齐到单元格的解决方案。希望你问同样的...