根本原因是vertical-align: middle只在行内元素的当前行框内按基线对齐，而横向导航中li常设为block、height不足或line-height未配平，导致对齐上下文丢失；现代推荐用display: flex + align-items: center直接控制容器交叉轴居中。
横向导航里 a 文字垂直居中失效，根本原因是什么？
不是 CSS 写错了，而是你默认以为 vertical-align: middle 能管住整个导航条——它只对行内元素在**当前行框（line box）内**的基线对齐起作用。横向导航通常用 ul > li > a 结构，a 是行内元素没错，但一旦父级 li 设了 display: block 或者 height 不够、line-height 没配平，vertical-align 就完全没机会生效。
常见现象包括：a 看起来“偏上”或“贴顶”，鼠标悬停时文字跳动，加了图标后更错位。
-
vertical-align加在ul或nav上——完全无效，块级容器不支持这个属性 -
li设了display: block后又给a加vertical-align: middle——但a已脱离行内流上下文，对齐基准丢失 - 父容器高度靠内容撑开（
height: auto），而line-height又小于视觉所需空间，导致“看似居中实则悬空”
现代浏览器首选：用 Flex 布局稳控 li 和 a 的对齐
给 ul 加 display: flex，再用 align-items: center，所有子项（包括 li 和其中的 a）都会按容器中线对齐，不依赖 line-height 计算，也不怕换行或图标混排。
示例代码：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
nav ul {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin-right: 1rem;
}
nav a {
display: inline-block; /* 保持可点击区域完整 */
text-decoration: none;
padding: 0.5rem 1rem;
}- 不用改
a的display类型为block，否则可能破坏内联语义和下划线表现 - 如果
a里含svg图标，统一设vertical-align: middle在svg上即可，不需要额外包裹 - 响应式缩放时，
flex方案不会因字体大小变化而失准
兼容 IE10+ 且需保留传统结构？用 line-height + height 配平
仅适用于单行文本、固定高度导航。核心是让容器高度与行高一致，强制文字在行框内垂直居中。
关键点：
- 必须给
li或a设置明确height（如height: 48px） - 同时设
line-height: 48px，值必须严格相等，不能用em或rem（会随字体缩放漂移） -
a保持默认display: inline，不要加display: block，否则line-height失效 - 若加了 padding，要从 height 中扣除，比如
padding: 0 12px，则height和line-height应设为48px - 0（竖向无 padding 时才直接等高）
图标和文字混排时，vertical-align 怎么调才不飘？
图标（svg、i、img）默认 baseline 对齐，常比文字略高，尤其字体图标容易“顶出”。
安全做法：
- 统一把图标设为
display: inline-block，再试vertical-align: middle或vertical-align: text-bottom - 对字体图标（如 Font Awesome），常用微调值：
vertical-align: -.125em，比middle更贴合文字中线 - 避免在
a和图标上分别设不同vertical-align，容易互相干扰；优先控制父容器display: flex; align-items: center - 用
gap: 8px替代margin-right分隔图标和文字，防止换行时错位
真正卡住多数人的，从来不是“怎么写”，而是忘了所有垂直居中方案都依赖父容器有**可计算的高度**——哪怕用了 flex 或 absolute，只要外层 nav 或 ul 是 height: auto 且没内容撑开，就一定居不正。动手前先确认高度来源是否稳定。
