图标难对齐的核心原因是 inline 元素的 baseline 对齐特性，flex + align-items: center 是最直接解法，配合 gap 和移除 vertical-align 可彻底解决。
图标难对齐，核心问题往往不是图标本身，而是容器的默认对齐行为和行内元素的基线（baseline）特性在作怪。用 flex + align-items 是最直接、可控的解法。
为什么图标总“飘”在文字旁边？
常见场景：按钮里放一个 Font Awesome 或 svg 图标 + 文字，结果图标比文字高/低一截。这是因为 、 默认是 inline 元素，会按基线对齐（baseline），而文字的基线以下还有 descender 空间（比如 g、y 的下延部分），图标却没这个结构，视觉上就“悬空”了。
用 flex 布局统一控制对齐
给图标+文字的父容器设为 display: flex，就能脱离 inline 基线规则，改用 flex 的对齐逻辑：
- 水平居中常用：
justify-content: center（如图标在按钮中间） - 垂直对齐关键：
align-items: center—— 这会让图标和文字的中线自动对齐，彻底解决高低不一 - 如果父容器高度固定（比如 40px 的按钮），
align-items: center会把子元素在交叉轴（这里是垂直方向）上居中，图标和文字自然就“站平”了
小细节别忽略
即使用了 flex，也可能因其他样式干扰效果：
立即学习“前端免费学习笔记（深入）”；
- 检查图标是否被设置了
vertical-align（比如vertical-align: middle），它会和 flex 冲突，建议删掉 - 确保父容器没有
line-height过大或padding不对称，否则 flex 容器自身位置偏移，子元素看着还是歪的 - SVG 图标建议加
height: 1em和width: 1em，让它随字体大小缩放，和文字尺寸联动
一行代码快速修复（推荐模板）
对按钮类容器，直接套用：
.btn-icon { display: flex; align-items: center; gap: 8px; }
其中 gap 替代了手动写 margin，更干净；align-items: center 就是解决对齐的核心。