应使用 display: flex + align-items: center 实现稳定居中，而非 vertical-align；因后者仅对 inline/inline-block 元素生效且依赖行框中线，易受字体、行高、图标类型及空格影响，在 Flex 容器中被忽略。

直接用 display: flex + align-items: center，别调 vertical-align——它在现代场景下既不可靠又难调试。

为什么 vertical-align: middle 总是失效

它只对 inline 或 inline-block 元素生效，但真正起作用的是“行框中线”，不是容器视觉中心。同一段 CSS 在 Chrome 和 Safari 里偏移 1–2px 是常态，原因包括：

• font-size 或 line-height 变动会牵动对齐基准
• 不同图标来源（<svg>、<i class="icon">、<img>）内置 baseline 不一致
• 父元素用了 font-size: 0 或 HTML 换行符引入空格，悄悄改变了行盒高度
• 在 flex 容器里给子项写 vertical-align，浏览器直接忽略

用 flex 实现稳定居中的写法

把图标和文字包进同一个容器（比如 <button> 或 <div>），设为 flex 容器即可，无需关心字体、行高或图标尺寸差异。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 父容器必须设 display: flex 和 align-items: center
• 用 gap 控制间距，比 margin-right 更语义清晰且不影响对齐
• 图标用 <svg> 或 <img> 即可，不用额外设 display 或 vertical-align
• 文字保持原生文本或包裹在 <span> 中，不要套 <div> —— 否则会破坏单行流

示例：

<button style="display: flex; align-items: center; gap: 8px; padding: 6px 12px;">
  <svg width="16" height="16"><use href="#icon-download"></use></svg>
  下载
</button>

哪些情况仍要小心

flex 方案看似万能，但实际落地时容易忽略几个边界点：

立即学习“前端免费学习笔记（深入）”；

• 如果按钮里混用了 font-size 差异大的图标（比如 12px SVG + 24px 字体图标），视觉上还是不齐——此时需统一图标尺寸或用 height/width 显式约束
• IE11 对 gap 支持不完整，若需兼容，改用 margin 并确保第一个子项无左 margin
• 按钮本身被设了 float 或 display: block 以外的 display 值（如 grid），会覆盖 flex，得检查 computed styles
• 图标是 Web Font（如 Material Icons），其默认 vertical-align 可能被库内联样式覆盖，加 !important 或改用 SVG 更可控

真正麻烦的从来不是对齐逻辑，而是你不知道哪一层样式悄悄重写了 display 或注入了干扰的 line-height。打开 DevTools，逐层看 computed display 和 vertical-align 值，比猜更省时间。