推荐用 flex 实现图标与文字垂直居中：将二者包裹在 display: flex 容器中，设 align-items: center，用 gap 控制间距并添加 white-space: nowrap 防换行；若兼容旧浏览器，需同时设 inline-block 和匹配的 line-height。
小图标和文字不在同一水平线？先确认 display 类型
直接给 <img> 或 <i> 加 vertical-align: middle 常常无效，根本原因是它们默认是 inline 元素，而 vertical-align 只对 inline、inline-block、table-cell 生效——但前提是父容器没破坏行内上下文。
常见翻车点：
- 父容器用了
float或display: block却没重设子项 display，导致图标“掉出”行框 - 图标字体（如 Material Icons）的
font-size和文字不一致，视觉上偏高/偏低 - 混用
margin-top硬调，结果换字体或字号就失效
用 flex 实现稳定垂直居中（推荐）
把图标和文字包进同一个容器，设为 display: flex，交叉轴对齐由 align-items: center 控制，完全绕开 line-height 和字体度量干扰。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="icon-text"> <svg class="icon"></svg> <span>保存</span> </div>
对应 CSS：
.icon-text {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
-
gap替代margin控制间距，语义清晰且不影响对齐逻辑 -
white-space: nowrap防窄容器下文字换行破坏单行对齐 - 如果父容器本身是
display: block或有float，要确认没覆盖掉display: flex
ul 列表里图标居中？别只动 li，先清 ul 默认边距
在 <ul> 里放图标+文字时，即使每个 <li> 内部用了 flex，整个列表仍可能“偏上”——问题出在 <ul> 自带的 padding-inline-start（通常 40px）和 margin-block，它会让 flex 容器的基线错位。
必须重置：
.list ul {
padding: 0;
margin: 0;
list-style: none;
}
- 否则
align-items: center对的是含缩进的盒模型，不是你看到的视觉中心 - 如果保留项目符号，加
list-style-position: inside避免被padding截断 -
<li>不必额外设display: block，flex 子项默认行为已足够
兼容老浏览器？vertical-align 还能救，但得配对用
IE9–10 或某些旧 Android WebView 里 flex 支持不稳定，可退回 vertical-align 方案，但必须满足两个条件：
- 图标和文字都显式设为
display: inline-block - 父容器设固定
line-height，且等于容器高度（单行场景）
例如：
div {
line-height: 24px;
height: 24px;
}
.icon, .text {
display: inline-block;
vertical-align: middle;
}
注意：line-height 必须和容器高度一致，否则垂直位置会漂移；多行文字不适用此法。
真正容易被忽略的是：图标尺寸变化时，line-height 得同步改——flex 方案里这一步根本不存在。
