使表格中文本下的数字居中，该表格以左为中心

Question

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

这是我的桌子和我的小提琴

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 上

Answer 1

首先，您需要将两个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>

Answer 2

嗨，最好的方法是.

给div 一个相同的类，例如

<td>
<div style="font-size: 20px;" class="sameclass">Hosted</div>
<div class="centerDivText sameclass" id="totalHosted" style="font-size: 25px; font-family: Playfair Display,serif">6</div>
</td>

现在你可以使用 CSS 来做到这一点，就像 -td>:nth-child(2){text-align:center;}

或td>:nth-child(2) .sameclass{text-align:center;}

试试这个，我希望它会起作用

如果要对齐上部div 文本，请使用-

td:nth-child(1).sameclass{text-align:center;}

Answer 3

您需要将以下行添加到css文件中。无需创建任何类。 这是小提琴。

tr td div:nth-of-type(2){
text-align:center;
}