按钮内图标与文字对不齐的根本原因是基线对齐差异，最稳定解法是用display: inline-flex + align-items: center，配合gap和1em图标尺寸实现响应式居中。
button里放图标和文字，为什么总对不齐
因为默认的button是inline-block，而图标（比如<svg>或<i>）和文字的基线（baseline）对齐方式不同，文字按文本基线，图标常按容器底边，视觉上就“飘”了。
- 别用
vertical-align: middle硬调——它只对行内元素有效，且受父容器line-height干扰大，改一个值可能全乱 - 图标用
display: inline-block+vertical-align: middle看似可行，但遇到不同字号/行高组合时极易偏移 - 真正稳定的做法是让按钮自身变成弹性容器：用
display: inline-flex
inline-flex为什么比flex更合适
inline-flex保留了按钮原本的行内流式布局行为——它不会独占一行，能和其他inline元素（比如文字、其他按钮）自然并排，而display: flex会让按钮变成块级，破坏原有布局结构。
-
inline-flex下，align-items: center直接垂直居中所有子元素（图标+文字），不受字体度量影响 - 不需要额外包裹
<span>或设置line-height，代码干净 - 兼容性足够好：Chrome 21+/Firefox 20+/Safari 6.1+/Edge 12+，现代项目基本无压力
图标尺寸和间距怎么控制才不踩坑
图标大小不一致、左右没留空，是按钮看起来“挤”或“歪”的常见原因。重点不是调margin，而是统一盒模型基准。
- 给图标加
flex-shrink: 0，防止小屏下被压缩变形 - 用
gap: 8px（而非左右margin）控制图标与文字间距，语义清晰、响应友好 - 图标本身推荐用
width: 1em; height: 1em;，这样它会随按钮font-size等比缩放，避免固定px导致在不同字号下错位
示例：
立即学习“前端免费学习笔记（深入）”；
button {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
button svg {
width: 1em;
height: 1em;
flex-shrink: 0;
}
IE11下inline-flex失效怎么办
IE11支持flex但不支持inline-flex，会退化成block，按钮强行换行。如果必须兼容，不要改布局逻辑，而是用display: -ms-inline-flexbox补丁。
- 只加前缀不够，还需补
-ms-flex-align: center替代align-items -
gap在IE完全不支持，得回退到margin，但只作用于图标：给图标加margin-right: 8px（文字末尾不加） - 实际项目中，若已放弃IE，这段兼容代码可直接删掉——省心又少bug
复杂点在于：图标如果是<use>引用的SVG symbol，它的em尺寸可能受<svg>根元素viewBox影响，此时要检查font-size是否真能驱动缩放；容易被忽略的是，某些UI库的图标组件自带display: block，会破坏inline-flex的子项排列，得手动重置。
