Html 完全可单击表格单元格中居中的文本

这个让我抓狂，不幸的是我还不太擅长CSS

如何将水平和垂直居中的文本链接放入可完全单击的表格单元格中

我研究、尝试了几种解决方案，但没有一种有效。以下是我迄今为止最好的方法：

HTML

<table class="dataTable">
<thead>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <a href="#">I wanne be centered!</a>
        </td>
        <td>
            <a href="#">Me too!</a>
        </td>
    </tr>
</tbody>
</table>

这一个给了我居中的文本，但链接只覆盖单元格的宽度，而不是高度。如果我将链接的css更改为display:inline块，则整个单元格可以单击，但文本不再垂直居中

---

我两者都需要。救命啊

我认为您应该删除以下内容：

.dataTable td {
    display:inline-block;
}

将文本包装在

div style="padding-top:5px;".

---

这将使它大致居中。

我想这就是你想要的：

.dataTable{
文本对齐：居中；
}
.数据表a{
显示：内联块；
宽度：100%；
身高：100%；
}
/*只是为了更好的可视化*/
.数据表td{
背景：红色；
}

标题1
标题2

请注意，

td

在您的示例中不是

.datatable

的子项。@abiessu:

td

肯定是

.datatable

的子项；

表中的所有内容都是子元素。您是否尝试在父元素
tr
上设置固定高度（即像素高度）？只有这样子元素的高度才能设置为100%。@DavidThomas：我承认他们是后代，但不是孩子。但是，如果CSS没有区分差异，我承认这一点。@abiessu：好的，我想我明白你的意思，但值得注意的是，空格匹配所有子体，因此选择器适用于这里的用例。如果OP使用了子组合符，那么这将是一个问题，但是CSS实际上并不关心元素之间祖先的“深度”。我删除了CSS，没有任何效果。我还尝试按照Markus Hofmann的建议在.dataTable tr上设置一个固定的像素高度，但没有效果。
div style="padding-top:5px;".