valign 属性在 HTML5 中已被废弃，对长文本无效；应使用 CSS 的 vertical-align 或 Flex 布局实现单元格内容垂直居中，并需确保行高足够、清除默认边距、设置最小高度。

valign 属性在现代 HTML 表格中**无法确保长文本单元格对齐美观**——它已被 HTML5 明确废弃，所有主流浏览器（Chrome/Firefox/Edge 90+）完全忽略该属性，哪怕你写 <td valign="middle">，也不会生效。 别白费力气调试 valign，真正起作用的是 CSS。

为什么 valign 对长文本无效且不可靠

长文本单元格（比如多行 <p>、换行的 <span> 或含图标+文字的组合）会暴露 valign 的本质缺陷：它不是“让内容在单元格里居中”，而是控制整块内容相对于行框基线的位置。一旦内容超出单行，valign="middle" 就失去预期效果，尤其在响应式缩放或字体大小变化时，偏移更明显。

vertical-align: middle 在 <td> 上能用，但有前提

给 <td> 设置 vertical-align: middle 是标准做法，但它只对“单元格自身”生效，不干预内部元素布局。要让它对长文本真正起效，必须满足：

• 单元格所在行 <tr> 有足够高度（不能靠内容自动撑开），否则“居中”无参照空间
• 避免内部元素（如 <p>）默认 margin 干扰——建议重置：p { margin: 0; }
• 如果单元格内是块级嵌套结构（例如 <div><p>...</p><button>...</button></div>），vertical-align 对这些子元素无效

长文本单元格推荐用 Flex 布局兜底

当内容复杂、行数不固定或需精确控制图文间距时，vertical-align 力不从心。直接把 <td> 变成 Flex 容器最稳妥：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<td style="display: flex; align-items: center; padding: 12px; min-height: 80px;">
  <div>
    <p>这是一段可能换行的长文本，还带标点和空格</p>
    <small>副信息</small>
  </div>
</td>

注意三点：

立即学习“前端免费学习笔记（深入）”；

• min-height 必须显式设置，否则 Flex 容器高度塌陷，“居中”就没了意义
• align-items: center 垂直居中，justify-content: center 水平居中（按需添加）
• 内部 <p> 不用再设 margin，Flex 会自然隔离内容

容易被忽略的细节：表格整体高度与行高冲突

即使你写了 vertical-align: middle 或用了 Flex，如果表格启用了 border-collapse: collapse 且没设 line-height，长文本可能因行高计算异常而贴顶或溢出。解决方案很简单：

• 统一给 th, td 设 line-height: 1.5（避免继承父级过小值）
• 禁用 table { font-size: 0; } 类 hack（它会让 line-height 失效）
• 检查是否意外设置了 height: 0 或 max-height 等限制性样式

真正麻烦的从来不是“怎么写对齐”，而是“为什么写了却看不见效果”——绝大多数问题出在父容器高度未约束、内部元素默认边距干扰，或误把 vertical-align 当成了通用居中工具。