HTML表格单元格垂直对齐异常：用户头像居中而非居顶原因排查

核心原因 #

HTML表格的<td>元素默认自带CSS属性vertical-align: middle，这个样式会让单元格内的所有内容（包括头像、文本等）自动垂直居中对齐，这就是头像居中显示的根本原因。

验证与解决 #

你的代码里，单元格同时包含头像和长文本，但没有手动修改<td>的垂直对齐属性，浏览器就会应用默认的middle值。

要让头像居顶，只需要给<td>设置vertical-align: top即可：

td {
  vertical-align: top;
}

如果只想让头像所在的单个单元格居顶，可以给该单元格加个类名，再单独设置样式：

<td class="avatar-col"><img src="你的头像地址" alt="用户头像"></td>

.avatar-col {
  vertical-align: top;
}

内容的提问来源于stack exchange，提问作者Maxim 64