Table 单元格难题：尝试将 link 在 table 单元格内垂直居中，而整个单元格区域是 link 可点击

Question

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

P.S。我避免使用 line-height 因为我的 link 需要多行。

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>

Answer 1

您可以使用辅助 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>

Answer 2

在锚标记中添加了跨度并对输出进行了 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>

Table 单元格难题：尝试将 link 在 table 单元格内垂直居中，而整个单元格区域是 link 可点击

Table cell conundrum: trying to vertically center a link inside a table cell whose entire cell area is link-clickable

css

html-table

vertical-alignment

tablecell

centering