如何实现表格单元格内图片与文本居中且同设为链接？

要实现示例中的效果，核心是把图片和文本都放入链接标签内，同时通过Flex布局让它们在单元格内垂直水平居中，具体调整如下：

解决方案代码 #

CSS #

th {
  text-align: center;
  vertical-align: middle;
  padding: 10px; /* 增加内边距优化视觉效果 */
}

th a {
  display: flex;
  flex-direction: column; /* 图片在上、文本在下的垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  width: 100%; /* 链接区域覆盖整个单元格 */
  text-decoration: none; /* 可选：移除链接下划线 */
  color: inherit; /* 继承单元格文本颜色 */
}

th a img {
  width: 100%;
  margin-bottom: 8px; /* 图片与文本之间的间距 */
}

HTML #

<table style="width:100%;">
  <tr>
    <th style="width:33.33%;">
      <a href="#">
        <img src="https://www.w3schools.com/HOWTO/img_snow_wide.jpg" alt="图片描述">
        CENTER
      </a>
    </th>
    <th style="width:33.33%;">
      <a href="#">
        <img src="https://www.w3schools.com/HOWTO/img_snow_wide.jpg" alt="图片描述">
        CENTER
      </a>
    </th>
    <th style="width:33.33%;">
      <a href="#">
        <img src="https://www.w3schools.com/HOWTO/img_snow_wide.jpg" alt="图片描述">
        CENTER
      </a>
    </th>
  </tr>
</table>

关键说明 #

1. 链接包裹范围：将文本移入<a>标签内，确保图片和文本同属一个可点击区域，点击任意位置都能触发跳转
2. Flex布局控制居中：通过给<a>设置display: flex，结合flex-direction: column实现垂直排列，再用align-items和justify-content完成水平、垂直方向的居中
3. 交互体验优化：设置链接width:100%，让点击区域覆盖整个单元格，避免仅点击图片或文本才生效

内容的提问来源于stack exchange，提问作者Justin H