html - 将表格中文本下方的数字居中，居中于左侧

Question

我有下面的表格，在每个“td”中我有两个 div。一个显示标题，一个显示一些数字。该表当前左对齐。我想将数字置于其上方 div 的中心部分下方(教学、托管、点)，但仍尽可能保持标题信息向左对齐。我应该为这个或其他一些 css 使用“th”标签吗？

这是我的 table 和我的 fiddle

table,
th,
td {
  border: 1px solid black;
}

<div id="pointsTags" style="">
  <table style="width: 100%;">
    <tr>
      <td>
        <div style="font-size: 20px;">Hosted</div>
        <div id="totalHosted" style="font-size: 25px; font-family: Playfair Display,serif">6</div>

      </td>
      <td>
        <div style="font-size: 20px;">Attended</div>
        <div id="totalAttended" style="font-size: 25px; font-family: Playfair Display,serif">45</div>
      </td>
      <td>
        <div style="font-size: 20px;">Taught</div>
        <div id="totalTaught" style="font-size: 25px; font-family: Playfair Display,serif">344</div>
      </td>
      <td>
        <div style="font-size: 20px;">Points</div>
        <div id="totalPoints" style="font-size: 25px; font-family: Playfair Display,serif">0</div>
      </td>
    </tr>
  </table>
</div>

我对我的问题进行了更多编辑以反射(reflect)我正在寻找的内容，所有答案都不正确，因为它们将数字置于 td 内，而不是其上方的 div 上

Answer 1

首先，您需要将两个 div 包装成一个 div 并为其提供 set display:inline-block。并将 text-align:center 添加到第二个 div。

table,
th,
td {
  border: 1px solid black;
}

<div id="pointsTags" style="">
  <table style="width: 100%;">
    <tr>
      <td>
      <div style="display:inline-block;">
        <div style="font-size: 20px;">Hosted</div>
        <div id="totalHosted" style="font-size: 25px; text-align:center; font-family: Playfair Display,serif">6</div>
       </div>
      </td>
      <td>
      <div style="display:inline-block;">
        <div style="font-size: 20px;">Attended</div>
        <div id="totalAttended" style="font-size: 25px; text-align:center; font-family: Playfair Display,serif">45</div>
        </div>
      </td>
      <td>
      <div style="display:inline-block;">
        <div style="font-size: 20px;">Taught</div>
        <div id="totalTaught" style="font-size: 25px; text-align:center; font-family: Playfair Display,serif">344</div>
        </div>
      </td>
      <td>
      <div style="display:inline-block;">
        <div style="font-size: 20px;">Points</div>
        <div id="totalPoints" style="font-size: 25px; text-align:center; font-family: Playfair Display,serif">0</div>
        </div>
      </td>
    </tr>
  </table>
</div>