vertical-align 仅对 display 为 inline、inline-block 或 table-cell 的元素生效，对 flex/grid 子项无效；其 middle 值对齐父元素 font-size 的 0.5ex 位置，并非视觉中心；svg inline 插入时需注意 viewbox 影响基线；flex 布局应改用 align-items:center。
vertical-align 对 inline 元素才有效
很多人一上来就给 <img> 或 <i></i> 加 vertical-align: middle，结果没反应——八成是它父容器用了 display: block，或者图标本身被设成了 display: block。vertical-align 只对 display 值为 inline、inline-block、table-cell 的元素起作用，对 flex 或 grid 子项完全无效。
实操建议：
- 用浏览器开发者工具检查图标元素的
display计算值，不是看写没写，而是看最终生效的是什么 - 文字和图标必须在同一个
line box里，意味着它们得是同级的 inline-level 元素（比如都在<span></span>里，或都是<span></span>和<img>并列） - 避免在图标上直接设
display: block，除非你同步改父容器为display: flex并换方案
middle 不等于“视觉居中”，它对齐的是基线附近
vertical-align: middle 实际是对齐父元素 font-size 的 0.5ex 位置（约小写字母 x 高度的一半），不是元素自身的中点。所以当图标尺寸远大于文字行高，或字体特别粗/特别细时，middle 看起来就会偏高或偏低。
常见错误现象：
- 图标比文字明显高出一截（尤其用 Font Awesome 或 SVG
<use></use>时） - 同一行里不同字号的文字混排，图标只对齐其中一行
实操建议：
- 优先试
vertical-align: -0.125em或-0.25em，比middle更可控 - 配合
font-size调整：如果图标来自字体（如 icon font），确保其font-size和文字一致，否则基线参考系就乱了 - 用
vertical-align: text-bottom或text-top快速验证是否真在基线体系内生效
SVG 图标 inline 插入时默认 baseline 对齐，但 viewBox 影响实际位置
把 SVG 写进 HTML（非 <img src="...">），默认行为等同于文字，走 vertical-align: baseline。但 SVG 自身的 viewBox 和内部路径的坐标原点，会让“底边”看起来不一致——比如一个 viewBox="0 0 24 24" 但图形集中在顶部的 SVG，它的“基线”其实落在底部空白处。
使用场景：
- 用
<svg><use href="#icon"></use></svg>复用 symbol - 直接内联
<svg></svg>标签并设置宽高
实操建议：
- 给 inline SVG 加
vertical-align: -0.15em是较稳的起点（比文字略下沉） - 避免只靠
height缩放 SVG，改用width+height: auto保比例，否则viewBox映射会失真，影响对齐感知 - 如果必须精确控制，给 SVG 外层包一层
<span style="display: inline-block; vertical-align: middle"></span>，把对齐逻辑收束到 wrapper 上
Flex 布局下 vertical-align 完全失效，该换思路
只要父容器设了 display: flex，子元素的 vertical-align 就被忽略。这时候还硬调这个属性，只会浪费调试时间。
性能 / 兼容性影响：
- Flex 是现代布局首选，
align-items: center比反复试vertical-align值更可靠、更易维护 - IE10+ 支持 flex，若需兼容 IE9 及以下，才需要回退到
vertical-align+inline-block方案
实操建议：
- 确认父容器 display 类型再决定方案：flex 用
align-items，inline 流用vertical-align - 不要混合使用：比如父容器 flex，又给子图标加
vertical-align，既无效果又增加理解成本 - 文字+图标组合频繁出现时，封装成一个
<inline-icon></inline-icon>组件，内部统一用 flex，外部只传 icon 名和文本
真正难的不是调出某个对齐效果，而是判断当前上下文到底属于哪一类渲染模型——inline 流、flex、table-cell，三者对齐机制完全不同，混用时连报错都不会有，只有视觉偏差。盯住 computed styles 里的 display 和 vertical-align 是否生效，比背口诀管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
