用 Flexbox 实现图标与文字垂直居中：将按钮设为 display: flex 并添加 align-items: center，图标和文字自动居中，配合 gap 控制间距，避免 vertical-align 的 baseline 对齐陷阱。
图标和文字在按钮里“一高一低”，不是图标飘上面就是文字沉底——根本原因不是尺寸没对齐，而是默认的 vertical-align 值（baseline）在作祟。用 flex 最稳，vertical-align 次之，但后者对 HTML 结构和 display 类型敏感。
button 里用 flex 实现图标+文字居中（推荐）
现代按钮几乎都用 display: flex，它天然无视 baseline 对齐陷阱，且兼容性已覆盖所有主流浏览器（IE10+ 需加前缀，但实际项目基本可忽略）。
- 父容器（即
<button>）设display: flex和align-items: center，文字和图标自动垂直居中 - 图标建议用
<svg>或<img>，不用额外设vertical-align - 若需间距，用
gap（推荐）或margin-right，避免用padding破坏按钮内边距一致性 - 注意：如果按钮内嵌了
<span>包文字，span不需要设display: inline-block—— flex 下它自动成为 flex item
示例：
<button style="display: flex; align-items: center; gap: 8px; padding: 8px 16px;"> <svg width="16" height="16"><use href="#icon-check"></use></svg> 提交 </button>
纯 inline 场景下用 vertical-align: middle
当按钮是 <button> 且内部全是行内容（比如 <img> + 文字），又不想改 display 模式时，vertical-align 是唯一能用的 CSS 属性。
立即学习“前端免费学习笔记（深入）”；
- 必须给图标元素（
<img>或<svg>）显式设置vertical-align: middle - 文字部分不能是块级包裹（如
<div>），否则会换行或破坏行内流；应保持为纯文本或<span> - 若图标尺寸不统一（比如有的 16px、有的 20px），
middle可能仍偏移——此时要配合line-height与图标 height 一致，例如line-height: 16px - 慎用
vertical-align: top/bottom，它们依赖父元素 line-height，容易因字体渲染差异导致跨浏览器偏移
别踩这些坑
很多“居中失败”其实和图标本身无关，而是布局上下文被悄悄改变了。
-
<button>默认是inline-block，但一旦里面写了display: block的子元素（比如误套了个<div>），整行布局就崩了——图标和文字会分两行 - 用
background-image替代内联图标看似省事，但无法动态换色、缩放失真、且文字和背景对齐仍得靠padding-left+line-height手动调，维护成本高 - 给图标设
float: left是上世纪方案，会脱离文档流，导致按钮高度塌陷，必须清浮动，完全没必要 - 不要在按钮上直接写
text-align: center期望图标也跟着居中——它只管文字，不管图标（除非图标也是 inline 元素且没设vertical-align）
真正麻烦的不是怎么对齐，而是不同项目里按钮结构不统一：有的用 <button>，有的用 <a role="button">，有的还套了三层 <span>。统一用 flex + gap 能绕过绝大多数兼容性判断，但前提是团队愿意收敛 DOM 结构。否则，每次加图标都得先 inspect 一下父容器的 display 类型。
