html - 完全可点击的表格单元格中的居中文本

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 更改为 display:inline-block，则整个单元格是可点击的，但文本不再垂直居中。

我两个都需要。帮助！

Answer 1

我认为你应该删除这个：

.dataTable td {
    display:inline-block;
}

看到这个小提琴

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'高度来做到这一点。否则，链接不会占据整个单元格的高度。您可以使用heightproperty 或使用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;".

这将使其大​​致居中。