时间戳

首页 > 解决方案 > 使表格中文本下的数字居中，该表格向左居中

html - 使表格中文本下的数字居中，该表格向左居中

问题描述

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

这是我的桌子和小提琴

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>

我已经对我的问题进行了更多编辑以反映我正在寻找的内容，所有答案都不正确，因为它们将数字居中在 td 内，而不是在其上方的 div 上

标签： htmlcss

解决方案

首先，您需要将两个 div 包装成一个 div 并设置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>

推荐阅读