完全可点击的表格单元格中的中心文本

Question

这个让我很生气，不幸的是我还不是很擅长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

.dataTable td a {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    display:block;
    text-decoration: none;
}

.dataTable td {
    display:inline-block;
}

这个给我中心文本，但链接只覆盖单元格的宽度，而不是高度。如果我更改链接的css以显示：inline-block，则可以单击完整单元格，但文本不再垂直居中。

我需要两者。救命啊！

Answer 1

我认为你应该删除它：

.dataTable td {
    display:inline-block;
}

see this fiddle

Answer 2

我想这就是你想要的：

.dataTable {
    text-align: center;
}

.dataTable a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* Just for better visualization */
.dataTable td {
  background: red;
}

<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>

如果您想增加td的高度，则应通过修改a的高度来实现。否则，链接将不会占据整个单元格的高度。您可以使用height属性或line-height来实现。

.dataTable {
    text-align: center;
}

.dataTable a {
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 5; /* To get a 5 text lines high cell */
}


.dataTable td {
  /* Just for better visualization */ 
  background: red;
}

<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>

Answer 3

将文字换行

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

这将使它大致居中。