优先用align-items: center解决按钮内图标文字对齐，前提是按钮设display: flex且子元素未脱离文档流；vertical-align: middle常失效因仅对inline/inline-block等元素生效，而按钮多为block或未显式设置display，且其对齐的是行框x-height中线而非视觉中心，受字体、line-height等影响易偏移1–2px。
直接用 align-items: center 就能解决大多数按钮内图标和文字不对齐的问题，但前提是容器必须是 display: flex，且子元素没脱离文档流。
为什么 vertical-align: middle 在按钮里经常失效
因为 vertical-align 只对 inline、inline-block、inline-table 和 table-cell 元素生效。而很多按钮用的是 display: block 或未显式设置 display 的 div，此时写 vertical-align: middle 浏览器直接忽略。
- 常见错误现象：
button img { vertical-align: middle; }单独加，图标底部仍有空白；或字体图标（如<i class="icon"></i>）明显偏高/偏低 - 字体图标库（如 Bootstrap Icons）常自带
vertical-align: -0.125em，会覆盖你的设置 -
vertical-align: middle对齐的是行框 x-height 中线，不是容器高度中点——受font-size、line-height、甚至字体 ascender/descender 影响，Chrome 和 Safari 渲染可能差 1–2px - 一旦按钮内文字换行、或用了响应式字号，
vertical-align就完全不可控
align-items: center 怎么正确用在按钮上
它控制的是 flex 容器的交叉轴对齐，默认 flex-direction: row 时就是垂直居中，逻辑清晰、不依赖字体度量。
- 必须给按钮本身设
display: flex，不能只给内部span或svg加 - 图标和文字都保持原生行内标签（
<svg>、<i>、<img>），不要额外套<div>—— 多一层 DOM 反而增加基线干扰 - 如果图标是字体图标，确保其
font-size和文字一致，否则视觉上仍会错位 - 用
gap: 8px替代margin控制间距，避免影响对齐计算 - 加
white-space: nowrap防止窄屏下文字换行破坏单行对齐
交叉轴对齐的其他值怎么选
align-items 不只有 center，不同场景要匹配不同值：
立即学习“前端免费学习笔记（深入）”；
-
align-items: flex-start：图标和文字顶部对齐，适合左上角图标 + 标题组合 -
align-items: flex-end：底部对齐，适合按钮右下角带小角标（如new） -
align-items: baseline：按文字基线对齐，仅当图标是纯文本符号（如★）且需严格对齐多行文字时才用；对 SVG 或图片基本无效 -
align-items: stretch：默认值，子项会拉伸填满交叉轴——按钮里一般不用，除非你故意让图标撑高
容易被忽略的兼容性与干扰点
IE10/11 对 align-items 支持有限，且若子元素有 min-height，可能被压缩；更隐蔽的是，某些布局干扰会让 flex 失效。
- 父容器若有
float或position: absolute，会破坏 flex 上下文，导致align-items不起作用 - 按钮内部混用
float子项或position: absolute图标，这些元素脱离 flex 流，不受align-items控制 - SVG 图标若没设
height和width，或viewBox原点不统一，实际渲染高度会浮动，影响对齐稳定性 - 用
line-height方案时，必须保证height和line-height数值完全相等——差 1px 就偏移，且只适用于单行固定高场景
真正稳定的对齐不靠调参，而靠约束上下文：确保 flex 容器干净、子项语义明确、图标尺寸可控。一旦出现多行、响应式字号或混合图标来源，align-items 就是唯一靠谱的选择。
