valign 属性在 HTML5 中已废弃，应改用 CSS 的 vertical-align（单行文本）或 flex 布局（复杂内容），因其违反语义化、不响应式且 W3C 验证报错。

valign 属性在 中已失效 —— 它是 HTML 4 的废弃属性，现代浏览器虽仍能解析（出于兼容性），但不推荐使用，且在 HTML5 中完全不合法。

为什么 valign 不该再用

HTML5 标准移除了所有表现型属性，valign 就是典型代表。它混杂结构与样式，违背语义化原则；更重要的是，它无法响应式控制、不支持 flex/grid 布局、不能被 CSS 选择器覆盖或继承。

• W3C 验证器会报错：Attribute valign is obsolete. Use CSS instead.
• 在 嵌套
  或使用 display: grid 改写表格时，valign 彻底失效

  IE8+ 虽支持，但 Safari 和 Chrome 对 valign="bottom" 在百分比高度单元格中行为不一致

  CSS 替代方案：对齐单行文本最简方式

  对纯文本内容的

  ，用 vertical-align 是最直接等效替代。注意：它只对 table-cell（即默认

  ）、inline、inline-block 元素生效。

  • vertical-align: top ≈ valign="top"
  • vertical-align: middle ≈ valign="middle"
  • vertical-align: bottom ≈ valign="bottom"
  • 若需基线对齐（如含图标+文字），可用 vertical-align: baseline，这是 valign 没有的能力

  示例：

  <td style="vertical-align: middle;">居中文字</td>

  复杂内容（多行/块级元素）怎么垂直居中

  当

  里有

  、 或多段落时，vertical-align 会失效（因它只对“行内盒”起作用）。此时必须靠父容器（
  ）的布局能力：

  • 设
  为 display: flex，再用 align-items: center —— 简洁可靠，IE11+ 支持

  若需兼容老 IE，可加 line-height 匹配 height（仅限单行文本）

  避免用 position: absolute + transform: translateY(-50%)，它破坏表格单元格的自动高度计算

  示例（flex 方案）：

  <td style="display: flex; align-items: center; height: 80px;">
    <div>任意高度内容</div>
  </td>

  容易被忽略的关键点

  vertical-align 的值不是相对于整个单元格，而是相对于“行框（line box）”的基线——这意味着如果单元格里有不同字号或行高的内容，middle 可能看起来偏高或偏低；flex 方案虽强，但一旦给

  设了 border-collapse: collapse，又没处理 padding，视觉对齐仍可能错位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！