vertical-align: middle 经常失效，因其仅对 inline、inline-block、table-cell 等行内或表格单元格元素生效，且对齐基准是行框中线而非容器高度中点，受 font-size、line-height 及块级包裹干扰。
vertical-align: middle 为什么经常失效
因为 vertical-align 只对 display 值为 inline、inline-block、inline-table 或 table-cell 的元素生效。直接给默认 img 写 vertical-align: middle，浏览器会忽略——它本就是 inline 元素，但“中”指的是行框中线（line box center），不是容器高度中点，受父级 font-size 和 line-height 牵连。
常见错误现象：
-
img { vertical-align: middle; }单独写，图标底部仍留白 - 文字和图标上下错位，像被“吊”在基线上
- 混用
span和img时，一个设了vertical-align，另一个没设，反而加剧错位
实操建议：
- 确保图标和文字都在同一行内流中：显式给两者加
display: inline-block - 父容器不用改
display，但子元素必须同步声明，否则vertical-align不起作用 - 若容器有固定高度，优先配
line-height等于该高度，再配合vertical-align: middle，比纯靠vertical-align更稳
flex 布局下 align-items: center 怎么用才不翻车
align-items: center 是目前最可控的垂直居中方案，但它只作用于交叉轴（默认 flex-direction: row 时即垂直方向），且只影响参与 flex 流的子项。
容易踩的坑：
- 子元素用了
float或position: absolute，会脱离 flex 流，align-items完全无效 - 文字换行后，
align-items: center仍按整个span盒子垂直居中，不是每行文字单独对齐 - IE10/11 中，若子项有
min-height，可能被压缩；可加flex-shrink: 0锁定尺寸
实操建议：
- 把图标和文字包进一个容器，设
display: flex+align-items: center - 图标和文字都用原生行内标签（如
<i></i>或<img>+<span></span>），避免额外嵌套<div> <li>需要水平间距时，优先用 <code>gap（现代浏览器），兼容旧版可用margin-right - 仅适用于单行文本，换行即失效
- 容器必须有明确高度（
height），且line-height需与之相等 - 文字字体、字号变化时，需同步调整
line-height，否则视觉偏移 - 场景举例：按钮里
<i class="icon"></i><span>保存</span>，容器高 32px → 设line-height: 32px - 记得加
box-sizing: border-box，避免 padding 影响实际高度计算 - 不要和
vertical-align混用，二者逻辑冲突，容易互相覆盖 - 完全规避元素对齐问题，图标是背景，文字是内容，天然同基准
- 支持 IE8+，无需考虑 flex 或 inline-block 兼容性
- 图标尺寸变化时，只需调
background-position和padding-left，不牵动 HTML 结构 -
height和line-height不能省——前者保证容器有高度，后者控制单行文字垂直居中 - 图标若需响应式缩放，背景图不如
<img>或<svg></svg>灵活 - 无法通过 JS 动态切换图标（除非切 CSS 类），语义性弱于真实元素
line-height 是不是万能单行解法
对固定高度容器里的单行图标+文字，line-height 是最轻量的方案——它不依赖 display 类型，也不引入新布局上下文。
但限制极明确：
实操建议：
背景图方案适合什么情况
用 background-image 把图标当背景塞进文字标签里，是兼容性最强的老办法，至今仍有不可替代的场景。
优势和适用点：
注意点：
真正复杂的不是选哪种方案，而是先看清：你要居中的，到底是“文字相对于图标”，还是“整个组合相对于父容器”，或是“多行文字中的图标对齐某一行”。目标身份没判准，再熟的代码也白写。
