文字和图标对不齐的核心原因是vertical-align默认按baseline对齐，而图标底边与文字基线不一致；应确保元素为inline或inline-block，改用vertical-align:middle，或直接使用display:flex+align-items:center实现居中。
文字和图标对不齐，核心问题通常出在 vertical-align 的默认行为上。图标（比如 <i></i>、<svg></svg> 或内联图片）默认按基线（baseline）对齐，而文字的基线和图标底边往往不在同一水平，视觉上就“矮一截”或“高一点”。解决关键不是调 margin，而是理解并合理使用 vertical-align。
确认元素是 inline 或 inline-block
vertical-align 只对 inline、inline-block、table-cell 元素生效。如果图标或文字被设为 display: block，该属性会失效。
- 检查开发者工具，确保图标容器没有意外变成
block - 常见写法：
font-icon标签加display: inline-block更可控 - SVG 图标建议加
vertical-align: middle或-webkit-font-smoothing: antialiased避免渲染偏移
用 vertical-align: middle 替代 baseline
baseline 是默认值，但对图标几乎总是不合适；middle 是最常用、最稳妥的替代方案——它让元素的垂直中点与父元素内容区中线对齐。
- 给图标加：
vertical-align: middle; - 若文字行高较大，可同步微调：如
line-height: 1.5;+vertical-align: middle;效果更稳 - 注意：
middle对齐的是“内容区中线”，不是整个行框，所以需配合合理 line-height
统一父容器 line-height 和 font-size
文字高度依赖 font-size 和 line-height，图标尺寸也常以 em 或 px 设定。两者单位不一致，容易错位。
立即学习“前端免费学习笔记（深入）”；
- 推荐用相对单位统一控制：如父容器设
font-size: 14px; line-height: 1.4; - 图标用
font-size: 1em;或width: 1em; height: 1em;，自然跟随文字大小 - 避免图标用固定
px尺寸而文字用rem，易造成缩放错位
备选方案：flex 布局一键居中
如果兼容性允许（现代项目基本没问题），直接用 display: flex 是最干净的解法，完全绕过 vertical-align 的复杂逻辑。
- 给文字+图标外层加：
display: flex; align-items: center; - 无需关心基线、中线，也不用调 line-height，一行代码搞定
- 适合按钮、导航项、标签等结构明确的场景
基本上就这些。vertical-align 不难，但容易忽略它的生效前提和参照基准。优先试 middle + 检查 display 类型，不行就 flex，不复杂但容易忽略细节。
