vertical-align 仅对 inline、inline-block、table-cell 元素有效；默认 baseline 对齐导致图标下沉；推荐用 middle、text-bottom 或数值偏移调整；字体图标宜用 -0.125em；flex 布局中应优先使用 align-items 而非 vertical-align。
vertical-align 对 inline 元素才有效
vertical-align 不是万能对齐工具，它只对 display: inline、inline-block、table-cell 这类元素起作用。如果你给一个 div（默认 block）设 vertical-align: middle，完全没反应——这是最常见的“失效”原因。
实际场景中，文字和图标并排时，图标常是 <i></i>、<span></span> 或 <img alt="CSS如何实现文字与图标对齐_使用vertical-align属性调整" >，它们默认就是 inline，所以 vertical-align 能用；但若你把图标包进 div 且没改 display，那就得先加 display: inline-block。
- 检查图标容器的
display值，不是block才行 -
<img alt="CSS如何实现文字与图标对齐_使用vertical-align属性调整" >标签天然 inline，可直接用vertical-align - 避免在 flex 容器里滥用
vertical-align——flex 有自己的对齐属性（如align-items），混用反而混乱
baseline 对齐为什么总让图标“下沉”
默认值 vertical-align: baseline 是罪魁祸首。文字有基线（baseline），而 <img alt="CSS如何实现文字与图标对齐_使用vertical-align属性调整" > 的 baseline 在图片底边，导致它和文字的基线对齐后，底部“挂”在文字下方，看起来像下沉了一截。
解决方法不是猜，而是明确指定对齐方式：
立即学习“前端免费学习笔记（深入）”；
-
vertical-align: middle：让图标中点与父元素 x-height 中点对齐（x-height 是小写字母 x 的高度），对大多数图标+中文/英文组合最自然 -
vertical-align: text-bottom：图标底边对齐文字底边，适合需要严格底部对齐的场景 -
vertical-align: -2px（数值偏移）：微调常用手段，比如图标略高一点就写-1px，略低就写1px，比猜middle更可控
字体图标（如 Font Awesome）的特殊处理
用 <i class="fa fa-star"></i> 这类字体图标时，vertical-align 行为更微妙：它对齐的是“文字的 baseline”，而字体图标的视觉中心往往不等于其字体度量中心。
这时光靠 middle 可能还是偏高或偏低，建议：
- 统一设置
i.fa { vertical-align: -0.125em; }（em 相对当前字体大小，比 px 更健壮） - 配合
line-height使用：如果父容器line-height是1.5，图标对齐会受此影响，可临时设line-height: 1隔离干扰 - 避免在图标上设
font-size后不重置vertical-align——字号变大，baseline 位置也变，原有偏移值可能失效
替代方案：什么时候该放弃 vertical-align
当出现以下情况，硬调 vertical-align 已经得不偿失：
- 同一行多个图标+文字组合，且字号/行高不一致
- 需要响应式缩放，而
px偏移值在不同屏幕下错位 - 父容器用了
display: flex——直接上align-items: center更稳
现代项目中，flex 是更可靠的选择：display: inline-flex 保持行内流特性，同时用 align-items: center 精确控制垂直居中，不用管 baseline、x-height 这些隐式规则。
真正难的不是调哪个值，而是判断该不该用这个属性——它本质是为“行内排版”设计的，不是通用居中方案。
