inline-flex比vertical-align更可靠，因为vertical-align:middle依赖行框x-height中线且受font-size、line-height、字体度量及svg viewbox原点影响大，跨浏览器易偏移；而inline-flex配合align-items:center直接按交叉轴居中，不依赖基线、不受line-height干扰，且gap可统一控制间距。
为什么 inline-flex 比 vertical-align 更可靠
因为 vertical-align: middle 对齐的是行框 x-height 中线，不是容器中心；它受 font-size、line-height、字体 ascender/descender 和图标自身 viewBox 原点影响极大。同一段 CSS 在 Chrome 和 Safari 里可能差 2px，换了个 font-size: 1.2rem 就偏移。而 display: inline-flex 把按钮变成一个行内弹性容器，align-items: center 直接按交叉轴（垂直方向）居中子元素，不依赖基线，也不吃 line-height 干扰。
button 里用 inline-flex 的最小可行写法
别改图标本身，只调按钮容器：
<button class="icon-btn"> <svg class="icon"></svg><span>保存</span> </button>
.icon-btn { display: inline-flex; align-items: center; gap: 0.5em; }
-
gap比手动设margin-right更干净，自动处理不同字号下的间距一致性 -
svg默认是display: inline，但放进inline-flex容器后，它就按 flex item 渲染，align-items立刻生效 - 如果图标尺寸不统一，建议统一设
width: 1em; height: 1em;—— 这样它会随父文字大小缩放，响应式友好
容易踩的坑：inline-flex + flex item 的 display 冲突
常见错误是给图标子元素加 display: block 或 float: left，这会破坏 flex 布局：
-
flex子项上设display: block无效，浏览器忽略 -
float在 flex 容器里完全失效，且会触发怪异的重排行为 - 如果用了字体图标（如
<i class="bi bi-save"></i>），检查它是否自带vertical-align: -0.125em—— 这个声明在 flex 容器里不生效，但可能干扰你调试时的预期 - 别在
.icon-btn上同时写text-align: center和inline-flex，前者对 flex item 无意义，纯属冗余
需要兼容老浏览器时怎么处理
IE11 不支持 gap，但支持 inline-flex 和 align-items：
- 把
gap: 0.5em替换为justify-content: center+ 图标/文字分别加margin（不推荐） - 更稳妥的做法：用
gap作为现代写法，再加一条 fallback：margin-inline-start: 0.5em（仅对图标生效） - Safari 10–12 需要
-webkit-inline-flex前缀，但 iOS 12.2+ 已全面支持标准语法，2026 年基本可忽略
真正难搞的是图标来源混杂：SVG 来自 Sketch 导出、Font Awesome 和 Bootstrap Icons 同时存在——它们的 viewBox 和内部锚点不一致，这时光靠 inline-flex 不够，得统一导出时设 viewBox="0 0 16 16" 并用 preserveAspectRatio="xMidYMid meet"。这点常被忽略，但决定最终对齐精度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
