优先用 display: flex + align-items: center；若必须用 vertical-align，则弃用 middle，改用 -0.125em 或 text-bottom，因其对齐行盒中线而非视觉中心，受字体、字号、SVG viewBox 等影响易偏差 1–2px。
超链接里加图标后文字和图标不对齐，不是代码写错了，是默认基线对齐（baseline）在捣鬼——<a></a> 是行内元素，<svg></svg> 或 <i></i> 字体图标也按 baseline 对齐，而图标通常没 descender，视觉上就“飘”在文字上方。
给 <a></a> 加 display: flex 最稳
别在 <a></a> 里套 <span></span> 再 flex，直接让链接自己变成 flex 容器。这是目前兼容性、可维护性和响应式表现最可靠的路径。
-
<a href="#" class="icon-link"><svg>...</svg>下载</a>，然后 CSS 写.icon-link { display: flex; align-items: center; gap: 0.4rem; } - 确保图标用
height: 1em或width: 1.2em，避免固定像素值（比如16px），否则换字号时错位 - 如果用了
<i class="bi bi-download"></i>这类字体图标，必须保持其display: inline（别加block或flex），否则内置的vertical-align: -.125em失效 - IE10/11 需补
-ms-flex-align: center，但 2026 年多数项目已无需考虑
vertical-align 在 <a></a> 里为什么总失效
因为 <a></a> 默认是行内元素，它的子元素（如 <svg></svg>、<i></i>）的 vertical-align 只影响行框内的相对位置，不改变整个链接的高度基准；一旦父级有 padding、line-height 不一致或字体度量差异，middle 或 text-bottom 就会偏移。
-
vertical-align: middle实际对齐的是父元素 font-size 的中点，不是视觉中心，容易因字体渲染差异跑偏 -
vertical-align: text-bottom更可靠，尤其对 SVG 图标，它对齐到文字底部，视觉上更“贴底” - 若强行用
line-height撑高再配vertical-align，换行或响应式缩放时立刻错位——这不是居中，是临时打补丁
字体图标（如 Bootstrap Icons）怎么调 vertical-align
Bootstrap Icons v1.10+ 确实自带 vertical-align: -.125em，但它只在 <i></i> 元素上生效，且前提是：没改 display、没加额外包裹、父容器没设 align-items 类干扰。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器开发者工具，确认
<i></i>上是否真实应用了该样式（常被重置 CSS 覆盖） - 如果用了自定义图标字体，
-.125em往往不准，建议实测改为text-bottom或middle，再配合font-size: 1rem统一缩放基准 - 别给
<i></i>加margin-right控制间距，改用gap（需父级为 flex）或padding-inline-end，避免破坏内联流布局
真正难的不是写出能对齐的代码，而是当字号从 1rem 改成 1.25rem、或换了一套系统字体、或按钮变响应式高度时，对齐依然稳定——这时候 flex + em 尺寸 + gap 的组合，比任何 vertical-align 值都扛折腾。
