CSS移动端实现图标与文字水平对齐_利用vertical-align middle

CSS移动端实现图标与文字水平对齐_利用vertical-align middle的重点在于把前置条件、操作顺序和容易误判的地方分清楚。

vertical-align: middle 在移动端常失效，因其仅对 inline 和 table-cell 元素有效，而 flex/grid 容器中完全无效；iOS Safari 对 baseline 计算更严格，且实际对齐的是 content area 中点而非视觉中心。

vertical-align: middle 为什么在移动端经常失效

因为 vertical-align 只对 inline 元素和 table-cell 元素生效，而很多图标（比如用 <i> 或 SVG）默认是 inline，但父容器若用了 display: flex 或 display: grid，vertical-align 就完全不起作用——这是最常被忽略的前提。

另外，移动端字体渲染差异大，特别是 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; }

1. .icon 需显式设置宽高（如 width: 16px; height: 16px;），否则可能因内容为空导致基线计算异常
2. .text 建议加 line-height: 1.2 或与图标高度一致，避免行高拉伸干扰对齐
3. 父容器 .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; }

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

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

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

svg { vertical-align: -0.125em; }

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

实际对齐效果是否准确，取决于图标盒模型、文字 line-height 和父容器 font-size 三者的组合。别只盯着 vertical-align 调，先确认 display 类型和 SVG 渲染行为。