vertical-align仅对td、th或display: table-cell元素生效，写在table、tr或div上无效；其作用是在单元格自身高度内对齐内容，需设height或padding才能凸显middle效果。
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">，再用<code>td { vertical-align: top; }可能被忽略或行为不一致。
迁移建议：
- 全局搜索替换所有
valign=，删掉
- 用
td, th { vertical-align: middle; }替代
- 如果必须内联控制单个单元格，用
style="vertical-align: bottom;"，而非valign
真正容易被忽略的点是：vertical-align 的生效前提是父容器必须形成“行内格式化上下文”或“表格格式化上下文”，而表格本身天然满足；一旦你把td改成display: block，vertical-align就彻底失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
