表格单元格难题：尝试将整个单元格区域可单击链接的表格单元格内的链接垂直居中

问题描述

如您所见，为了使整个表格单元格可链接点击，我使用了 td a {display: block}。问题是 td a {vertical-align: middle} 不再适用于 display: block。不知道如何垂直居中。任何帮助将不胜感激。

附言我避免使用 line-height，因为我的链接需要是多行的。

table {
width: 300px;
border-collapse: collapse;
}

td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}

td a {
display: block;
height: 100px;
vertical-align: middle !important;
}

<table>
<tr>
<td>TEXT</td>
<td><a href="">LINK</a></td>
</tr>
</table>

解决方法

您可以使用辅助 span 并将其居中放置在锚点内，以便其内容可以自由移动和对齐。

例如：

table {
  width: 300px;
  border-collapse: collapse;
}

td {
  border: 1px solid #000000;
  height: 100px;
  vertical-align: middle;
}

td a {
  display: flex;
  height: 100%;
}

td a span {
  height: fit-content;
  align-self: center;
}

<table>
  <tr>
    <td>TEXT</td>
    <td>
      <a href="">
        <span>
          A VERY LONG LINK MAY BE LIKE THIS ONE,I GUES,RIGHT? HERE WE GO :D
        </span>
      </a>
    </td>
  </tr>
</table>

,

在锚标记中添加了跨度并对输出进行了 CSS 更改

table {
width: 300px;
border-collapse: collapse;
}

td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}

td a {
    display: table;
            position: relative;
            height: 100%;
            width: 100%;
}
    
        span {
            display: table-cell;
            text-align:center;
            vertical-align: middle;
            
        }

<table>
<tr>
<td>TEXT</td>
<td><a href=""><span>LINK</span></a></td>
</tr>
</table>