图标与文字上下不对齐的根本原因是 inline 元素基线对齐机制，推荐用 display: flex + align-items: center 彻底解决，或配合 vertical-align: middle 与合理 line-height 轻量修复。
按钮里图标和文字上下不对齐，先查 line-height 和 vertical-align
图标（比如 <i class="bi bi-x"></i>）默认是 inline 元素，它的基线（baseline）和文字对齐方式由父级的 line-height 和自身的 vertical-align 共同决定。很多“图标偏高/偏低”问题，根源不是图标本身，而是按钮内部行盒（inline formatting context）没被约束。
常见错误现象：<button><i class="bi bi-x"></i> 关闭</button> 中图标比文字高 2–3px；或换行后图标跑到第二行左侧。
- 别只调
font-size或padding——它们不解决基线错位 - 给图标加
vertical-align: middle是最轻量解法，但需配合按钮的line-height值（推荐设为与font-size相近的数值，如line-height: 1.2） - 若用 SVG 图标，
vertical-align同样生效；但注意 SVG 默认display: inline，可显式设display: inline-block避免空格塌陷干扰
用 Flex 布局替代 inline 排列，彻底绕过基线问题
把按钮内部当作 flex 容器，图标和文字变成并列子项，就不再依赖 inline 基线对齐逻辑。这是目前最稳定、兼容性好（IE11+）、且语义清晰的做法。
实操建议：
- 给按钮加
display: flex; align-items: center; gap: 0.5rem; - 图标和文字分别包裹在
<span></span>或直接作为子节点（<i></i>+ 文本节点） - 避免在按钮内写换行符或多余空格——Flex 下空格会被当文本节点渲染，可能撑开间隙
- 若需图标居左/居右，用
justify-content: flex-start / flex-end，而非靠margin-left硬推
Bootstrap 按钮里图标对不齐？别碰 btn-sm/btn-lg
btn-sm 和 btn-lg 只改 padding 和 font-size，但图标尺寸、line-height、border-width 并不同步缩放。尤其 btn-outline-* 类多出 1px 边框，导致总高度偏差，图标视觉位置跟着偏移。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
真正可控的做法：
- 放弃语义类，用自定义 rem 基准：比如设
font-size: 0.875rem（对应 14px），再统一配padding: 0.375rem 0.75rem和line-height: 1.2 - 图标用
font-size: 1em（继承按钮字号），或固定font-size: 1rem保持比例 - 如果必须用 Bootstrap，至少重置其图标容器：
.btn i { vertical-align: -0.125em; }（微调经验值，需实测）
中英文混排时图标突然偏移，检查 white-space 和字体度量
中文字符和英文字母在相同 font-size 下实际渲染高度不同，加上某些字体（如思源黑体、PingFang）的 ascender/descender 设计差异，会导致图标在文字中间“看起来偏了”，哪怕 DOM 结构完全对齐。
这不是 bug，是字体渲染特性。缓解方案：
- 按钮内文字用
white-space: nowrap防止换行破坏对齐节奏 - 避免在按钮里混用多种字体族（
font-family），统一用系统字体栈（如font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;） - 图标区域单独设
font-size并加transform: translateY(-1px)微调（仅限必要场景，勿滥用）
真正难处理的不是“怎么对齐”，而是“为什么这次又偏了”——每次偏差来源都可能不同：可能是某处未重置的 line-height，可能是图标库 CSS 覆盖了 vertical-align，也可能是父容器用了 text-align: justify。遇到问题，优先打开 DevTools 查看图标元素的 computed line-height、vertical-align 和 box-sizing，比猜更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
