vertical-align: middle不准是因为它对齐行框中线而非视觉中心，该中线受line-height、字体ascender/descender及图标内联样式（如Bootstrap Icons默认-0.125em）共同影响；优先用inline-flex+align-items:center替代。
为什么 vertical-align: middle 总是不准
它对齐的是“行框中线”，不是视觉中心。这个中线位置由 line-height、当前字体的 ascender/descender、甚至图标自身内联样式共同决定。Bootstrap Icons v1.10+ 的 标签自带 vertical-align: -0.125em，会直接覆盖你写的 middle；中文文字基线又比英文低，导致同一段 CSS 在不同语言下表现不一致。
用 display: inline-flex 替代 vertical-align
这是最稳的解法，绕过 baseline 渲染陷阱，且兼容 Bootstrap 4（IE10+ 支持 inline-flex）。
- 给图标和文字的**直接父容器**加类：
.icon-text { display: inline-flex; align-items: center; gap: 0.25rem; } - 确保图标是
这种写法，不要额外套或 - 如果图标内部是 SVG（如 Bootstrap Icons），加一行重置：
i.bi svg { vertical-align: inherit; }，否则 SVG 自带的对齐会干扰 flex 行为 - 避免在该容器上同时设
line-height或font-size差异大的子元素——flex 居中有效，但视觉仍可能因字号悬殊而“感觉偏了”
当必须用 vertical-align 时怎么调才靠谱
只在无法改 HTML 结构或需兼容极老环境时用。数值必须用 em 单位，且要配合字体上下文。
- 优先试
vertical-align: text-bottom或vertical-align: -0.125em，比middle更可控 - 别用
top/bottom：它们基于整行框顶部/底部，浮动感强，换行后更难看 - 如果调完
font-size发现又偏了，说明参考系变了——原-0.125em可能需要改成-0.15em，建议抽成 CSS 变量统一管理 - 遇到多个图标混排（比如一个
1rem、一个1.25rem），硬调vertical-align就是徒劳，立刻切回inline-flex
Bootstrap 4 导航栏里图标文字对齐的特殊坑
导航栏默认是 display: flex，但它的 align-items: center 只作用于一级子项。如果你把图标塞进 再包进 ，那图标和文字实际在二级嵌套里，vertical-align 又被激活，baseline 问题立马回归。
- 正确做法：让图标和文字成为
.navbar的**同级直系子元素**，再用.header-nav { display: flex; align-items: center; }统一对齐 - 若必须保留
navbar-nav结构，就在每个菜单项的上加class="d-inline-flex align-items-center"（Bootstrap 4 支持） -
ml-auto类会让搜索框右对齐，但它不改变内部对齐逻辑——搜索框内输入框和图标仍需单独处理居中
真正麻烦的不是某一行 CSS 写不对，而是不同图标来源（Bootstrap Icons / Font Awesome / 自绘 SVG）、不同字体加载状态、不同缩放比例下，baseline 表现完全不可预测。固定 font-size、统一用 inline-flex、拒绝像素级 margin-top: -2px hack，才能让对齐一次写对，长期不崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
