直接用display: inline-flex + align-items: center可稳定实现图标与文字垂直对齐，因inline-flex保留按钮行内特性、避免基线干扰，且需确保父容器启用flex、svg显式设宽高和viewbox="0 0 16 16"、用gap或em单位控制尺寸间距。
直接用 display: inline-flex + align-items: center 就能稳住图标和文字的垂直对齐，不用调 vertical-align，也不用猜基线在哪。
为什么 align-items: center 有时没效果
不是属性写错了，是容器没真正变成 Flex 容器，或者子元素“不听话”。align-items 只在 display: flex 或 display: inline-flex 的直接父容器上生效。
-
button元素没加display: flex或display: inline-flex—— 单独写align-items: center完全无效 - 图标（比如
<svg></svg>）没设display: inline-block或display: block，仍按默认inline处理，基线对齐逻辑会干扰 Flex 居中 - 按钮里用了
line-height，且值远大于字体大小，撑高了行框但没参与 Flex 对齐，视觉上还是偏 - 父容器有
padding或border，导致整体位置偏移，误以为图标没居中
inline-flex 比 flex 更适合按钮场景
按钮通常要和其他内联元素并排（比如文字、其他按钮），display: inline-flex 保留了它的流式行为；而 display: flex 会让按钮变成块级，强行换行。
-
inline-flex下，align-items: center直接垂直居中所有子元素（图标 + 文字），不受字体度量影响 - 不需要额外包裹或设置
line-height，代码干净 - 兼容性足够：Chrome 21+/Firefox 20+/Safari 6.1+/Edge 12+，现代项目基本无压力
- 如果必须兼容 IE11，可用
display: -ms-inline-flexbox+-ms-flex-align: center替代
图标尺寸和间距怎么设才不漂移
图标大小不一致、左右挤在一起，常是因为没统一盒模型基准。重点不是调 margin，而是靠 gap 和 em 单位锚定。
- 给图标设
width: 1em; height: 1em;，它会随按钮font-size等比缩放，避免固定px导致错位 - 用
gap: 8px控制图标与文字间距，语义清晰、响应友好；IE 不支持gap时，回退为给图标加margin-right: 8px - 给图标加
flex-shrink: 0，防止小屏下被 Flex 容器压缩变形 -
<svg></svg>必须显式声明width、height和viewBox="0 0 16 16"，否则渲染位置会漂移
SVG 图标必须显式声明宽高和 viewBox
没设尺寸的 <svg></svg> 在按钮里容易缩成一团或顶格渲染，看着像没居中，其实是它自己没占满预期空间。
- 所有按钮内
<svg></svg>必须同时设置width和height（如16px），且值相等，避免拉伸 -
viewBox统一写成"0 0 16 16"，确保内容从左上角原点绘制，不漂移 - 临时加
border: 1px solid red到<svg></svg>上，确认它的盒子是否真的撑到指定尺寸 - 如果图标仍被压缩，加
flex-shrink: 0防止 Flex 容器主动缩小它
真正容易被忽略的是：图标和文字的“对齐”问题，本质不是位置没调准，而是它们根本不在同一套对齐逻辑里——要么全交给 Flex，要么全交给基线，混用就会出问题。一旦选了 inline-flex，就别再碰 vertical-align 和 line-height 干扰项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
