vertical-align: middle 不总管用，因其对齐的是父元素 content area 中线，而非视觉中心，受 font-size、line-height、字体度量等影响，导致 svg 与文字 baseline 对齐偏差。
直接用 inline-block + vertical-align 能快速解决图标与文字 baseline 对齐偏差，但效果不稳定——尤其在混合 SVG、字体图标、不同字号或行高时，容易出现视觉下沉或浮动错位。
为什么 vertical-align: middle 不总管用
SVG 默认 vertical-align: baseline，而 baseline 是文字底部参考线，并非视觉中心；vertical-align: middle 实际对齐的是“父元素 content area 的中线”，该中线位置受 font-size、line-height、ascent/descent 共同影响，不是固定像素偏移。所以当文字是 text-sm（12px），图标是 h-5（20px），vertical-align: middle 往往仍会偏低。
- 字体图标（如 Heroicons）若用
i标签包裹，需确保其font-size与文字一致，否则vertical-align参照系错乱 - SVG 若未设
height或width，会按原始 viewBox 缩放，导致实际尺寸不可控，vertical-align失效 -
vertical-align: text-top或text-bottom依赖字体度量，不同字体渲染结果差异大，跨平台不一致
inline-block + vertical-align 的实操要点
若坚持用此方案（例如旧项目无法改布局、需兼容 IE11），必须显式控制所有变量：
- 给文字和图标都加
inline-block，避免默认inline行内行为干扰 - 统一设置
font-size：图标容器（如span）需与文字同text-sm等类，否则vertical-align计算基准不同 - 优先用
vertical-align: top或bottom，比middle更可预测；若必须居中，试vertical-align: -0.125em（Tailwind 不内置，需自定义） - SVG 必须加
class="inline-block align-middle"，且移除自带style="vertical-align: ..."内联样式 - 检查 HTML 是否有隐藏空格：
<span>文本</span><svg>...</svg>比<span>文本</span> <svg>...</svg>少一个字符间隙，后者可能撑开行高
什么时候该放弃 inline-block 改用 inline-flex
只要项目支持现代浏览器（Chrome 80+、Firefox 70+、Safari 12.1+），遇到以下任一情况就该切到 inline-flex：
- 图标尺寸与文字字号明显不一致（如
text-xs+h-4） - 需要响应式缩放（
sm:h-5 md:h-6）且保持对齐稳定 - 图标来自
img标签且不能保证原始宽高比 - 父容器用了
truncate或line-clamp，inline-block会因换行逻辑错位 - 团队已统一采用
inline-flex items-center gap-1作为规范，避免维护多套对齐逻辑
真正难处理的不是对齐本身，而是混合多种图标来源（SVG inline、img、字体图标、React 组件封装图标）时，各自默认 display 和 vertical-align 行为不一致。统一用 inline-flex 是收敛复杂度最省力的方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
