优先用 display: flex + align-items: center；若必须用 vertical-align，则弃用 middle，改用 -0.125em 或 text-bottom，因其对齐行盒中线而非视觉中心，受字体、字号、SVG viewBox 等影响易偏差 1–2px。
超链接里加图标后文字和图标不对齐，不是代码写错了，是默认基线对齐（baseline）在捣鬼——@#@#@#@#@#@#@#@#@#@0，然后 CSS 写 .icon-link { display: flex; align-items: center; gap: 0.4rem; }
height: 1em 或 width: 1.2em，避免固定像素值（比如 16px），否则换字号时错位display: inline（别加 block 或 flex），否则内置的 vertical-align: -.125em 失效-ms-flex-align: center，但 2026 年多数项目已无需考虑
vertical-align 在
因为 默认是行内元素，它的子元素（如 、）的 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，但它只在 元素上生效，且前提是：没改 display、没加额外包裹、父容器没设 align-items 类干扰。
- 检查浏览器开发者工具，确认
上是否真实应用了该样式（常被重置 CSS 覆盖） - 如果用了自定义图标字体，
-.125em往往不准，建议实测改为text-bottom或middle，再配合font-size: 1rem统一缩放基准 - 别给
加margin-right控制间距，改用gap（需父级为 flex）或padding-inline-end，避免破坏内联流布局
真正难的不是写出能对齐的代码，而是当字号从 1rem 改成 1.25rem、或换了一套系统字体、或按钮变响应式高度时，对齐依然稳定——这时候 flex + em 尺寸 + gap 的组合，比任何 vertical-align 值都扛折腾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
