html - 如何将一列内的文本居中对齐？

Question

我正在尝试将 <td> 居中其中包含数字:

<tr>
    <td>October</td>
    <td align="center">1</td>
    <td>Cash</td>
    <td></td>
    <td>3</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
</tr>

我不想这样做:

<td align="center">3</td>

因为我不想在每个单独的单元格中添加它。所以我尝试了这个:

 <tr>
    <td>October</td>
    <td align="center">1</td>
    <td>Cash</td>
    <td></td>
    <div class="centered">
        <td>3</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </div>
 </tr>

并在我的CSS中添加了这些:

.centered {
    text-align: center; 
    align: center;
    float: center;
}

但它们似乎不起作用。

Answer 1

如果始终是相同的列，您可以这样编写 CSS 规则:

/* Center 3rd column */
table td:nth-child(3) {
    text-align: center;
}

或者将除第一、第二和第四列之外的所有列居中:

/* Center all columns */
table td {
    text-align: center;
}

/* Override rule above to left align specific columns */
table td:nth-child(1), table td:nth-child(2), table td:nth-child(4) {
    text-align: left;
}

/* Or simply apply 'text-left' class to desired td tags */
.text-left {
    text-align: left;
 }