valign 属性在现代 HTML 中已废弃，无法可靠实现图片垂直居中；根本原因是它基于行盒基线对齐，而 img 默认为 inline 元素，底部留有下行空间导致视觉下沉，且 display: block 时完全失效。
valign 属性在现代 HTML 中已废弃，直接用它无法可靠实现图片垂直居中——浏览器兼容性差，且在 <table> 的 <td> 或 <th> 上设置 valign="middle" 仅对纯文本或行内内容“勉强有效”，遇到 <img>（尤其是未设高宽或含 margin/padding 的）极易失效。
为什么 valign 对图片经常不生效？
根本原因是：valign 作用于单元格内容的“基线对齐”，而 <img> 默认是 inline 元素，其底部会留出文字下行空间（descender space），导致视觉上“下沉”。即使设了 valign="middle"，浏览器仍按 inline 布局规则计算，图片实际并未居中。
-
<img>在<td>中默认和文字一样参与行盒（line box）布局，valign调整的是整行盒子的对齐位置，不是图片自身 - 若图片设置了
display: block，它就脱离行盒，valign完全失效 - HTML5 不再支持
valign属性，部分浏览器（如 Chrome 90+）已忽略该属性
真正可靠的替代方案：CSS + 表格单元格
保留表格结构（比如用于数据展示），但用 CSS 控制图片对齐。关键不是改 <td>，而是控制 <img> 自身。
- 给
<td>加vertical-align: middle（注意：这是 CSS 属性，不是 HTMLvalign）——它只对 inline/inline-block 子元素起作用 - 把
<img>设为display: inline-block或保持默认 inline，并配合vertical-align: middle - 更稳妥的做法：设
<img>为display: block，然后用 flex 实现居中（需确保<td>是 flex 容器）
示例：
立即学习“前端免费学习笔记（深入）”；
<td style="vertical-align: middle;"> <img src="icon.png" style="vertical-align: middle;"> </td>
或更健壮的写法：
<td style="display: flex; align-items: center; justify-content: center;"> <img src="icon.png" style="max-height: 24px; height: auto;"> </td>
遇到固定高度单元格时的处理技巧
如果 <td> 显式设了 height: 40px，而图片高度不一致，vertical-align: middle 可能因行高塌陷失效。此时必须显式控制行高或使用 flex。
- 避免只设
height，改用min-height+line-height匹配高度（适用于单图无换行场景） - 优先用
display: flex，它不依赖行高，对图片尺寸变化鲁棒性强 - 若需兼容 IE10–11，可用
display: table-cell+vertical-align: middle组合（但需额外包裹一层）
真正要警惕的不是“怎么写 valign”，而是默认假设它还能用——现代项目里，所有靠 valign 实现的图片居中，几乎都藏着渲染不一致的隐患，尤其在缩放、高 DPI 屏幕或动态加载图片时更容易暴露。
