vertical-align: middle 是唯一可靠方案，必须作用于 td/th 元素本身，配合明确高度或 padding 才生效；valign 属性已废弃，兼容性差且易失效；图片与文字混合时需统一设置 img 的 vertical-align: middle。
vertical-align: middle 是唯一可靠方案
HTML表格里让图片和文字在单元格内垂直居中，align 属性（如 align="center"）完全无效——它只控制整个单元格在行内的水平位置，不作用于单元格内部内容。真正起效的是 CSS 的 vertical-align，且必须作用于 td 或 th 元素本身。
常见错误现象：写了 <td align="center">
<img><span>文字</span>
</td>，图片依然贴顶；或给 img 单独加 vertical-align: middle，但文字行高不一致导致错位。
-
vertical-align: middle必须设在td或th上，不是img或span - 单元格需有明确高度（如
height: 60px）或足够padding，否则对齐效果不可见 - 若单元格内含多行文字或换行
span，vertical-align: middle仍有效，但需确保父td未被其他样式（如line-height过大）干扰
为什么 valign 属性不能用
valign 是 HTML4 时代的废弃属性，现代浏览器虽仍兼容 <td valign="middle">，但 W3C 已明确标记为 obsolete。它的问题不止是“过时”：
<ul>
<li>无法与 CSS 优先级机制协同，容易被后续样式覆盖</li>
<li>在 Shadow DOM 或 Web Components 中常失效</li>
<li>与 Flexbox/Grid 混用时行为不可预测（比如 <code>td 被设为 display: flex 后，valign 彻底失效）
valign 标红警告图片+文字混合时的对齐细节
当 td 内同时存在 img 和行内文字（如 span），仅靠 vertical-align: middle 可能不够——因为 img 默认是 vertical-align: baseline，会把文字基线对齐到图片底部，造成视觉下沉。
- 解决方案：统一设置
td img { vertical-align: middle; }，消除默认基线行为 - 文字若用
p或块级元素包裹，vertical-align不生效，必须改为span或设td为display: flex; align-items: center; - 如果图片尺寸远大于文字行高，建议加
padding而非依赖height，避免小屏下溢出
兼容性与 fallback 处理
vertical-align: middle 在所有现代浏览器（Chrome 1+、Firefox 1+、Safari 1.2+、Edge 12+）中稳定支持，IE8+ 也完全可用。唯一要注意的是：
- 旧版 Android Browser（4.3 及更早）对
vertical-align在百分比高度单元格中支持不佳，建议 fallback 用固定padding-top/padding-bottom - 不要试图用
line-height: 100px模拟垂直居中——一旦文字换行就全乱 - 若项目强制要求 IE7-，只能用
display: table-cell+vertical-align: middle，但需额外 wrapper 元素，结构冗余
实际开发中，td { vertical-align: middle; text-align: center; } 配合合理 padding，已覆盖 99% 场景。复杂对齐需求（如图文错落、图标左对齐文字右对齐）应直接切到 Flexbox，别硬撑表格布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
