优先用 display: flex + align-items: center 实现图标与文字对齐；若必须 inline 布局，则设 vertical-align: middle、line-height 为无单位数值，并统一图标尺寸基准；旧浏览器可降级为 table-cell 或伪元素背景图。
line-height 和 vertical-align 配合失效时怎么办
小图标和文字在行内对不齐，本质是 vertical-align 默认按基线（baseline）对齐，而图标（尤其是 <svg> 或 <i>）往往没有明确基线，文字又受 line-height 拉伸影响，结果就是图标“浮”在文字上方或下沉。
- 优先给图标加
vertical-align: middle，不是top或bottom—— 后两者依赖父容器高度，不稳定 - 确保图标和文字父容器有明确
line-height（比如line-height: 1.5），且该值为无单位数字，避免继承干扰 - 如果图标是
<svg>，检查是否带height/width内联样式，这些会破坏vertical-align的计算基准；建议统一用font-size控制图标尺寸，并设vertical-align: middle - 遇到 FontAwesome 等字体图标，要确认其
font-size与文字一致，否则middle对齐点会偏移
Flex 布局下图标+文字列表的最小可靠写法
用 display: flex 替代纯 inline 元素对齐，是最可控的方式，尤其适合带说明文字的列表项（如设置项、菜单项）。
- 外层容器（
<li>或<div>）设display: flex; align-items: center - 图标元素加
flex-shrink: 0，防止文字过长时图标被压缩 - 文字部分用
<span>包裹，不设 width，靠 flex 自然撑开；若需文字换行，加overflow-wrap: break-word - 避免对图标设
margin-right，改用gap: 8px（父容器上），更语义化且兼容性足够（Chrome 84+/Firefox 63+）
IE11 或旧版 Safari 中 vertical-align 失效的兜底方案
老浏览器对 vertical-align: middle 在 inline-flex 或某些 SVG 场景下支持差，不能只靠 CSS。
- 给图标加
position: relative; top: 2px类似微调（数值需实测，通常 1–3px） - 或把整行改为
display: table-cell; vertical-align: middle，但必须配合display: table的父容器，结构略重 - 更稳妥的是放弃纯 CSS 对齐，用伪元素 +
background-image实现图标，这样高度完全由line-height控制，无对齐变量 - 注意：若用伪元素，
content: ""必须存在，否则图标不渲染；background-size: contain可避免拉伸失真
文字超长换行后图标错位的典型原因
图标没跟着文字第二行左对齐，而是卡在第一行末尾右侧——这几乎全是 white-space: nowrap 或 display: inline-block 用错了地方。
立即学习“前端免费学习笔记（深入）”；
- 检查图标父容器是否意外设置了
white-space: nowrap，它会让整行拒绝折行，导致文字溢出后图标被挤到可视区外 - 如果图标用了
display: inline-block且没设vertical-align，它默认按 baseline 对齐，而换行后文字基线位置已变 - 解决方法：文字区域单独包裹，设
flex: 1（在 flex 布局中）或overflow-wrap: break-word; word-break: break-word，让文字可控折行 - 图标始终放在文字前，不要用
float，float 在现代布局中极易引发后续元素错位
实际对齐效果取决于图标来源（SVG / 字体 / 图片）、文字行高、以及是否启用弹性布局。最稳的路径是：现代项目用 flex + gap，兼容旧环境则回归 table-cell 或伪元素背景图。别指望一个 vertical-align 能通吃所有组合。