按钮设为flex容器并用align-items:center即可实现图标与文字垂直居中，无需vertical-align或line-height调整；购物车与导航并排时，应统一父容器display:flex+align-items:center。
直接给按钮加 display: flex 和 align-items: center，图标和文字就稳了——不用调 vertical-align，不碰 line-height，也不靠 margin 硬凑。
按钮内图标+文字垂直居中为什么总偏高？
因为默认是按基线（baseline）对齐：<svg>、<img> 和文字的基线位置不同，图标没 descender，视觉上就“浮”在上面。换字体、改字号、缩放响应式时，偏移会更明显。
- 常见错误现象：图标顶着按钮上边框，文字沉底；
vertical-align: middle加了也没用，甚至让图标消失 - 根本原因不是图标本身，而是对齐上下文混乱——
vertical-align只作用于行内级元素，且受兄弟元素、font-size、line-height 共同影响 - 按钮原生支持
display: flex，没必要额外包一层<div>或用table-cell回退
怎么用 flex 实现购物车按钮内图标与文字对齐？
把按钮自己设为 flex 容器，而不是去调子元素的 vertical-align。
- 给按钮加
display: flex和align-items: center，交叉轴自动对齐中心 - 用
gap: 0.5rem控制图标与文字间距，比margin-left更稳定，不触发外边距合并 - 图标尺寸建议用
height: 1em或width: 1.2em，随字体缩放，避免固定像素值导致错位 - 确保图标是
<svg>或<img>，别在图标上手动加vertical-align或改display
购物车图标和导航菜单并排时怎么整体对齐？
这是更常见的场景：比如 <nav class="main-navigation"> 和 <ul class="site-header-cart"> 是兄弟元素，要视觉上严格对齐。
立即学习“前端免费学习笔记（深入）”；
- 关键不是调每个子容器内部，而是统一它们的父容器对齐逻辑
- 给最外层包裹容器（如
.header-navigation）加display: flex和align-items: center - 这样两个兄弟块元素会基于各自 content box 的中心线对齐，完全脱离 font-size、line-height 干扰
- 别在父容器上同时用
text-align: center——它只管水平，还可能干扰 flex 行为 - 如果用了 Bootstrap，注意检查是否有多余的
d-flex类嵌套，导致 align-items 被覆盖
哪些细节最容易被忽略？
真正翻车的地方往往不在 flex 声明本身，而在上下文干扰。
- 按钮里嵌了
<strong>或<span>？多一层标签就可能破坏 flex 子项结构，检查 DOM 是否干净 - 父容器没设高度（比如
min-height: 100vh或显式height），align-items: center就没参照基准 - 图标用了自定义字体图标（如
<i class="bi-cart">），确保它保持display: inline，没被其他样式强制改成 block 或 flex - IE10 需要
-ms-flex-align: center，但 2026 年绝大多数项目已可不考虑
