如何利用 HTML 嵌套结构解决按钮内图标与文字的垂直居中

直接在按钮里放图标和文字会错位，因为button默认按baseline对齐行内子元素，而图标与文字基线不同；解决方法是给按钮设display: flex、align-items: center和gap，并确保HTML结构扁平。

为什么直接在按钮里放图标和文字会错位浏览器把 <button> 当作 inline-level 容器，默认按 baseline 对齐子元素。图标（<img>、<svg> 或字体图标）和文字都算“行内内容”，但它们的基线位置不同——比如 SVG 默认有 descender 空间，文字有下行字母（如 g、y）部分，结果就是图标“浮高”、文字“坐低”。

常见问题表现包括：

1. Bootstrap 按钮中 <i class="bi bi-x"> 明显高于“关闭”二字
2. Font Awesome 图标顶部顶到按钮上边框
3. 同一按钮换不同字号后对齐突然崩塌

这不是图标本身问题，而是父容器没脱离行内流布局语义。

给按钮加 display: flex 是最稳解法不用改 HTML 结构，只加 CSS 即可生效：

.btn-with-icon {display: flex;align-items: center;gap: 0.375rem; /* 推荐用 gap，比 margin-left 更可靠 */}

关键点：

1. display: flex 让按钮从 inline-block 变成弹性容器，align-items: center 直接控制交叉轴（Y 轴）居中
2. gap 避免图标和文字之间因 margin 引发外边距合并或方向混淆（比如 RTL 场景下 margin-right 会反向）
3. 如果按钮本身已有类（如 Bootstrap 的 .btn），直接叠加 d-flex align-items-center 即可，无需重写样式

注意：某些图标库（如早期 Bootstrap Icons）会在 <svg> 上硬编码 style="vertical-align: middle"，这会和 flex 冲突，建议全局重置：

button svg, button img, button i[class*="bi-"] {vertical-align: unset;}

表格单元格里的按钮要额外处理 td 显示模式如果按钮嵌在 <td> 中，而你发现加了 display: flex 仍不对齐，大概率是 td 的 display 被覆盖了。

<td> 默认是 display: table-cell，但一旦父级用了 display: flex 或 CSS-in-JS 库注入了 display: block，它就失去表格单元格行为，vertical-align 失效，flex 也容易被干扰。

确保：

1. td 保持默认 display: table-cell（可用 DevTools 检查 computed style）
2. 不在 td 上设 height 过小（比如 height: 20px），否则 flex 子项没足够空间居中
3. 若必须限制高度，优先用 min-height + padding，而非固定 height

旧版 IE 兼容时别碰 gap 和 align-itemsIE11 不支持 gap，且对 align-items 在 inline-flex 容器中的表现不稳定。

若需兼容 IE11：

1. 改用 display: inline-flex + align-items: center（IE11 支持 inline-flex 下的 align-items）
2. 间距用 margin-left 替代 gap，并给图标加 vertical-align: middle 作降级兜底
3. 避免在按钮上同时设 line-height 和 flex，IE11 会优先响应 line-height 导致居中偏移

真正容易被忽略的是：只要按钮里出现任意一个 div、p 或设置了 display: block 的包装元素，flex 的 align-items 就只作用于那个块级子项，而不是图标和文字本身——所以 HTML 必须保持扁平：图标和文字同级，中间不插容器。