vertical-align 是控制表格单元格内容垂直对齐的唯一可靠方式，valign 属性已废弃且 HTML5 中移除，baseline 值在 CSS 中行为受限、易出错，实际场景极少需用；推荐统一用 vertical-align: middle 配合 padding 实现视觉居中。
vertical-align 是控制表格单元格内容垂直对齐的唯一可靠方式，valign（含 baseline 值）是已废弃的 HTML 属性，现代项目中不应使用。
为什么不能用 valign="baseline"？
HTML5 已移除 valign 属性，包括 top、middle、bottom 和 baseline 这些值。浏览器虽可能兼容渲染，但会触发 HTML 验证警告，且无法保证在所有环境（如严格模式、某些 SSR 框架或邮件客户端）下生效。
更关键的是：baseline 作为 vertical-align 的 CSS 值，行为与旧 valign="baseline" 不同——它只对行内级元素或 display: table-cell 有效，且对齐逻辑依赖父容器的 line-height 和字体度量，容易在混合内容（文字+图标+输入框）中产生意外偏移。
- 不要写
<td valign="baseline"> - 不要指望
vertical-align: baseline在<div>或<p>上起作用（它无效） - 若需基线对齐，必须确保父容器是表格单元格或显式设为
display: table-cell
vertical-align: middle 在表格中最常用也最稳妥
表格单元格默认就是 vertical-align: middle，但显式声明能避免被重置样式覆盖，尤其当引入第三方 CSS 或重置库时。
立即学习“前端免费学习笔记（深入）”；
推荐统一通过 CSS 类控制：
table td,
table th {
vertical-align: middle;
}
这样比逐个写 style="vertical-align: middle" 更易维护，也避免遗漏 <th>。
- 若某列需要顶部对齐，单独加类：
<td class="align-top">，再定义.align-top { vertical-align: top; } - 避免在
<tr>上设vertical-align—— 它不生效，该属性对<tr>无意义 - 配合
height或padding才能看出效果；空单元格或单行文本时，middle看不出区别
vertical-align: baseline 实际用在哪？
真正需要 baseline 的场景极少，典型的是同一行内多个字号不同的文字或图文混排时保持基线一致，例如：
一个 <span> 里有正常字号文字和一个小图标（<img>），默认 <img> 是 baseline 对齐，导致图标底部和文字基线对齐，看起来“悬空”——这时可设 vertical-align: bottom 或 vertical-align: middle 来修正。
在表格中强行用 baseline 反而容易出问题：
- 多行文本时，
baseline会按第一行文字基线对齐，其余行可能错位 - 单元格含按钮或输入框时，不同浏览器对表单控件基线定义不一致，结果不可控
- 若父
<td>设了line-height: 1.2，baseline位置会随行高变化，难以调试
真正要让表格内容“视觉居中”，vertical-align: middle + 合理 padding 就够了；baseline 是个精细调控工具，不是通用对齐方案，用错地方反而增加维护成本。
