在表头单元格中居中文本答案

【问题标题】：Centering text in a table head cell在表头单元格中居中文本
【发布时间】：2020-07-28 16:12:44
【问题描述】：

我很难让表格的标题居中。表格 HTML 如下：

<div class="table-responsive">

  <table class="table">

  <thead>

    <tr>
      <th>Photo</th>
      <th>Description</th>
      <th>Location</th>
      <th><span class="d-none d-md-flex text-center">Disposition</span><span class="d-flex d-md-none mx-auto">Dispo</span></th>
      <th class="text-right">Price</th>
      <th><span class="d-none d-md-flex mx-auto">Match %</span><span class="d-flex d-md-none mx-auto">Match</span></th>
    </tr>

  </thead>

  <tbody id="lisc_recs"></tbody>

  </table>

</div>

正是这个特殊的专栏让我心痛：

<th><span class="d-none d-md-flex text-center">Disposition</span><span class="d-flex d-md-none mx-auto">Dispo</span></th>

如果 .text-center 中没有响应式显示元素，我可以使其正常居中，例如：

<th class="text-center">Disposition</th>

当使用 d--flex 或 d--table-cell 显示时，有没有办法在跨度内居中文本？

问题似乎是跨度总是以 : 的全宽自行生成：

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

在 flexbox 元素中居中内容需要justify-content 或align-items，而不是text-align。

使用 Bootstrap 的 justify-content-center 类。