vertical-align仅对td、th或display: table-cell元素生效，写在table、tr或div上无效；其作用是在单元格自身高度内对齐内容，需设height或padding才能凸显middle效果。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

vertical-align只能用在和 上，别往或

里写

这个属性根本不会在

标签上生效，写上去纯属浪费；vertical-align只对表格单元格（td、th）或display: table-cell元素起作用。常见错误是把它加到table或tr上，结果毫无反应——因为tr不是内容容器，它不参与内容对齐计算。

如果你非要统一控制整张表的单元格对齐，应该这样写：

td, th { vertical-align: middle; }

而不是table { vertical-align: middle; }，后者完全无效。

middle效果不明显？大概率是单元格没撑开高度

vertical-align: middle不是“让文字在整张表格里垂直居中”，而是“让文字在当前td的高度范围内居中”。如果单元格高度由内容自动撑开（比如只有一行短文本），那middle和baseline看起来几乎一样。

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

• 加height：给td设固定高，比如height: 60px
• 加padding：上下留白也能扩大可用对齐空间，比如padding: 12px 8px
• 避免line-height干扰：如果同时设了line-height且值小于单元格高度，vertical-align可能被视觉掩盖

top/bottom/middle之外，baseline和text-bottom有实际用途

多数人只用top、middle、bottom，但baseline（默认值）和text-bottom在混合排版时很关键：

• baseline：适合含图标+文字的单元格，能让图标底部和文字基线对齐，避免图标“飘”在文字上方
• text-bottom：当单元格里有图片时，用它比bottom更可靠——bottom对齐的是整个盒模型底边，而text-bottom对齐的是文字字体底部，视觉更自然
• sub和super不适用于td/th，写了也无效

别再用valign="middle"这种HTML属性

valign是HTML4时代的遗留属性，在HTML5中已废弃。现代浏览器虽大多兼容，但W3C验证器报错，且无法用CSS覆盖——一旦写了<td valign="middle">，再用td { vertical-align: top; }可能被忽略或行为不一致。

迁移建议：

• 全局搜索替换所有valign=，删掉
• 用td, th { vertical-align: middle; }替代
• 如果必须内联控制单个单元格，用style="vertical-align: bottom;"，而非valign

真正容易被忽略的点是：vertical-align 的生效前提是父容器必须形成“行内格式化上下文”或“表格格式化上下文”，而表格本身天然满足；一旦你把td改成display: block，vertical-align就彻底失效了。