直接用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，也不用猜基线在哪。
为什么按钮里图标总偏上或偏下
不是图标没居中，是按钮没真正变成 Flex 容器。 align-items: center 只在 display: flex 或 display: inline-flex 的直接父元素上生效。常见漏写点：
- 按钮本身没加
display: inline-flex—— 单独写align-items: center完全无效 - 图标（比如
<svg>）没设display: block或display: inline-block，仍按默认inline处理，基线干扰 Flex 居中 - 按钮里用了
line-height且值远大于字体大小，撑高了行框但不参与 Flex 对齐
SVG 图标尺寸和位置为什么会漂移
没显式声明宽高的 <svg> 在按钮里容易缩成一团或顶格渲染，看着像没居中，其实是它自己没占满预期空间。必须同步控制三要素：
-
<svg>必须同时设置width和height（如1em），且值相等，避免拉伸 -
viewBox统一写成"0 0 16 16"，确保内容从左上角原点绘制 - 加
flex-shrink: 0，防止小屏下被 Flex 容器压缩变形
文字换行后图标错位怎么办
Flex 默认对齐方式会让 flex-direction: row 下的图标和文字在换行后脱离视觉关联——文字折行，图标却还卡在第一行末尾。根本原因是没隔离图标与文字的布局上下文。正确做法是嵌套一层 Flex：
立即学习“前端免费学习笔记（深入）”；
- 按钮内部再套一个
display: flex容器（或用inline-flex） - 图标设
flex-shrink: 0+height: 1.2em+line-height: 1.2em - 文字区域用
flex: 1+min-width: 0+overflow-wrap: break-word - 避免对按钮整体设
white-space: normal，它会影响图标对齐
移动端图标按钮宽度不均、间距难控
用 flex: 1 均分按钮宽度时，常因内容长度差异导致视觉不均。关键不是靠 width，而是靠 flex-basis 锚定基准：
- 父容器设
display: flex+flex-wrap: nowrap - 每个按钮设
flex: 1 0 0（即flex-grow: 1,flex-shrink: 0,flex-basis: 0） - 必须加
min-width: 0，否则长文本会撑开单个按钮，破坏均分逻辑 - 用
gap: 0.75rem控制按钮间距；IE 不支持时回退为margin-right+:nth-child(n)清除末尾
最易被忽略的是：所有按钮内 SVG 的 viewBox 必须统一，且不能省略 width 和 height —— 缺一不可，否则 Safari 和旧 Android 浏览器里图标位置会随机偏移。
