vertical-align 仅对 inline、inline-block 和 table-cell 元素生效；其“middle”指中点对齐父基线加 x-height/2，非视觉居中；img 底部空白源于基线对齐，可用 vertical-align: bottom 或 display: block 消除；table-cell 中才真正实现容器内垂直居中。
vertical-align 只对 inline、inline-block 和 table-cell 元素生效，给 div 或其他 display: block 元素加它完全没反应——这不是浏览器 bug，是规范本意。
为什么给 span/img 加 vertical-align: middle 看不出变化？
常见错觉是“加了就该居中”，实际它只调整元素在**当前行框（line box）内的基线位置**，不是相对于父容器居中。如果父容器没设 line-height、字体大小不一致、或存在不同 vertical-align 值的兄弟元素，对齐就会错乱。
- 父容器必须有明确的行高（比如
line-height: 24px），否则浏览器按默认字体大小推算，结果不可控 -
vertical-align: middle的“中间”不是视觉中心，而是元素中点对齐到“父元素基线 + x-height/2”的位置，文字和图片的 x-height 差异会导致偏移 - 若父容器里混用
span、img、input，它们的默认基线位置不同，单个元素调middle很难真正对齐
vertical-align 在 img 上消除底部空白的实操写法
图片默认是 inline 元素，会和文字共享基线，导致底部留白（约 4px）。这不是 margin 或 padding，而是基线对齐产生的空隙。
- 最直接：给
img加vertical-align: bottom或top，彻底脱离基线对齐逻辑 - 更彻底：改
img { display: block; }，让它退出行内上下文，空白自然消失 - 若需保留 inline 行为（比如图文混排），用
vertical-align: middle是常用折中，但要确保父容器font-size和line-height一致，否则不同字号下对齐偏移量会变
表格单元格中 vertical-align 的行为完全不同
当作用于 td、th 或 display: table-cell 元素时，vertical-align 才真正实现“内容在容器内垂直居中”，语义清晰、行为稳定。
- 此时
vertical-align: middle就是字面意思：让单元格内容在其内部垂直居中 - 支持
top/middle/bottom，不支持text-top、sub等行内专用值 - 这是少数能放心用
vertical-align实现可靠垂直居中的场景，无需额外 wrapper 或 flex
真正容易被忽略的是：同一行内多个 vertical-align 值会相互影响——比如一个 img 设 top，旁边 span 设 middle，整行的行框高度由最高元素决定，低的元素会被“吊”起来。这种连锁反应很难直观预判，调试时得把所有兄弟元素的 vertical-align 和 line-height 一起看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
