17370845950

文字和图标对不齐的核心原因是vertical-align默认按baseline对齐，而图标底边与文字基线不一致；应确保元素为inline或inline-block，改用vertical-align:middle，或直接使用display:flex+align-items:center实现居中。

文字和图标对不齐，核心问题通常出在 vertical-align 的默认行为上。图标（比如 、 或内联图片）默认按基线（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，不复杂但容易忽略细节。