如何使用 html 表格标签将文本准确地放在表格标题的中心？答案

【问题标题】：How do I put a text exactly in the center of a table header using html table tag?如何使用 html 表格标签将文本准确地放在表格标题的中心？
【发布时间】：2021-12-27 05:00:57
【问题描述】：

假设我的表格脚本中有这行代码：

<th rowspan="2" colspan="1">The header</th>

结果如下所示： one of the headers of my table

我想要的结果是文本垂直和水平居中。

我试过 class="text-center" 但它只水平居中。我发现的其他解决方案只有 1 rowspan 所以它是不同的，我可以使用文本中心。我还发现了这个valign，我认为它是vertical-align，它具有“中间”值，但它也不起作用。

如何获得我想要的结果？

【问题讨论】：

标签： html text html-table tags web-frontend

【解决方案1】：

这是一个使用 CSS 从左上角偏移 50% 的实现：

.center
{
    position: absolute;
    left: 50%;
    top: 50%;
}

在 div 类中调用表头标签，如下所示：

<div class=center>
    <th rowspan="2" colspan="1">The header</th>
</div>

【讨论】：

这种方法很有效，因为文本位于框的中间。但是，如果我也将它应用于其他标题，它们会堆叠在一起。我尝试删除 position: absolute;但文字只是停留在左下角。
@alviratulaha 试着把这个放在每个 div 中心类块 "
"