如何在数据表中将 <td> 的内容居中

Question

我有一个数据表，在 <td> 内有一个 css 正方形，我想将其居中，但我不知道该怎么做。

未对齐正方形的图像：

到目前为止我尝试过的：

th.dt-center, td.dt-center { text-align: center; }

columnDefs: [ { className: 'text-center', targets: '_all' }, ]

根据我在

中看到的内容

我也试过：

<th style="text-align:center;"></th>
<td style="text-align:center;"></td>

它适用于 <th> 但不适用于 <td>

我也尝试了解决方案 provided here

"columnDefs": [
    {"className": "dt-center", "targets": "_all"}
]

到目前为止，我还没有以任何方式使正方形居中

Answer 1

margin: 0 auto; 应该在 .square class.

上工作

Answer 2

根据我从你的问题中了解到的，只需使用

td {
     text-align:center;
}

如果你想让正方形也居中，

th,td {
     text-align:center;
}

还在此处分享了 link 以进行更改 live link、

Answer 3

尝试在您的 table

中使用 flexbox

td{
    display: flex;
    align-items: center;
    justify-content: center;
}

How to center the content of a <td> in a Datatable