CSS移动端图标文字水平对齐技巧

另外，移动端字体渲染差异大，特别是 iOS Safari 对 baseline 的计算更严格，vertical-align: middle 实际对齐的是“父元素 content area 的中点”，不是视觉中心，所以图标常偏高或偏低。

用 inline-block + vertical-align 实现稳定对齐

确保图标和文字都在同一行内、且都设为 inline-block，才能让 vertical-align 生效：

<span class="icon-text">
  <i class="icon"></i>
  <span class="text">设置</span>
</span>

.icon, .text { display: inline-block; vertical-align: middle; }

• .icon 需显式设置宽高（如 width: 16px; height: 16px;），否则可能因内容为空导致基线计算异常
• .text 建议加 line-height: 1.2 或与图标高度一致，避免行高拉伸干扰对齐
• 父容器 .icon-text 不要设 font-size: 0（除非你清楚它会吃掉 inline 元素间的空白，且后续需重置子元素字号）

更推荐的现代方案：flex 替代 vertical-align

在移动端，display: flex 是更可控、兼容性足够（iOS 9+ / Android 4.4+）的选择，且不依赖 baseline 计算：

.icon-text { display: flex; align-items: center; gap: 4px; }

• align-items: center 真正按容器交叉轴居中，无视字体大小或图标渲染差异
• gap 替代 margin 控制间距，避免外边距合并问题
• 如果图标是 SVG，记得加 vertical-align: top 或 display: block，防止底部多出空白（SVG 默认 inline，会留 baseline 空隙）

遇到 SVG 图标偏移时的紧急修复

SVG 作为 inline 元素时，底部常有约 4px 空白，即使设了 vertical-align: middle 也难对齐。直接加这行就能解决：

svg { vertical-align: -0.125em; }

• -0.125em 是经验数值，适配多数 16px 字号场景；若文字变大，可微调为 -0.15em
• 比 vertical-align: top 更柔和，不会让图标突然上跳一截
• 不要用 margin-bottom: -4px 这类绝对值，不同设备像素比下容易错位

好了，本文到此结束，带大家了解了《CSS移动端图标文字水平对齐技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！