浮动图标与文字不对齐，最直接修复是设置父容器line-height（如32px）并匹配图标高度；vertical-align对float元素无效，需改用inline-block或flex布局，后者通过align-items:center自动垂直居中且兼容性更优。
浮动图标与文字不对齐，line-height 是最直接的修复点
浮动图标（如 <i class="icon"></i>）和旁边文字视觉错位，90% 情况是行高没控住。浏览器默认用 line-height: normal，而这个值依赖字体、字号、甚至系统渲染引擎，导致同一段 CSS 在 Chrome 和 Safari 里图标“吊高”或“下沉”几个像素。
解决方式不是猜 margin，而是锁定行高：
- 给包含图标和文字的父容器（比如
<div class="nav-item">）设明确的 <code>line-height，例如line-height: 32px - 同时确保图标本身高度也匹配，比如
height: 32px或font-size: 32px（对字体图标） - 避免只设文字的
line-height——必须作用在共同父级，否则图标和文字各行其是 - 父容器加
font-size: 0消除空白间隙 - 图标和文字标签分别设
display: inline-block和vertical-align: middle（或-0.125em微调） - 子元素再单独恢复
font-size -
align-items: center直接控制交叉轴（垂直方向）对齐，不依赖基线、不看行高、无视字体差异 - 父容器自动撑高，不用
flow-root或伪元素清除浮动 - 图标尺寸变化（比如从 16px 换成 24px）时，文字位置自动重算，无需手动调
margin-top或重写line-height - 图标统一用
height: 1em; width: 1em;，配合vertical-align: -0.125em（比middle更稳） - 禁用图标上的
font-size（只对字体图标有效，对<img alt="怎样解决CSS浮动布局中图标与文字不对齐_调整line-height或浮动" >或<svg></svg>无效） - 文字容器加
transform: translateZ(0)强制硬件加速，可缓解 Safari 的 subpixel 抖动
注意：line-height 只对单行有效；若文字换行，图标会卡在第一行末尾，此时需改用其他方案。
float 元素上设 vertical-align 完全无效
很多开发者看到图标偏高，第一反应是加 vertical-align: middle，但只要元素还挂着 float: left 或 float: right，这个声明就被浏览器忽略——vertical-align 对浮动元素不生效，这是 CSS 规范明确定义的行为。
立即学习“前端免费学习笔记（深入）”；
如果你真想用 vertical-align，必须先移除 float，再把图标和文字都设为 display: inline-block：
这不是“兼容旧版”的权宜之计，而是唯一能让 vertical-align 起效的前提条件。
为什么推荐用 display: flex 替代 float 做图标文字对齐
浮动本意是让文字环绕图片，不是做 UI 控件对齐。硬用它实现图标+文字居中，等于拿扳手拧螺丝——能转，但费劲、易松动、还伤螺纹。
Flex 布局天然解决三个浮动痛点：
唯一要注意的是：别在一个元素上同时写 float 和 display: flex。浏览器会丢弃 float，但某些旧版 IE 可能行为异常，直接删掉 float 更干净。
移动端 Safari 中图标文字间距忽大忽小怎么办
在 iOS Safari 或部分安卓 WebView 里，即使写了 line-height: 1.5，图标和文字之间仍可能出现 1px 的随机空隙，尤其页面缩放后更明显。这不是 bug，是 subpixel 渲染 + 字体度量差异叠加的结果。
稳定做法是切断渲染干扰链：
这个现象常被误判为“CSS 写错了”，其实只是渲染引擎在像素边界上的取舍不同——与其反复调试，不如用 em 单位 + 硬件加速兜底。
