line-height 对 display: inline-block 元素无效，因其是块级盒子，不参与行框高度计算；文字居中应改用 flex 或调整父行框的 vertical-align 与 line-height。
line-height 对 display: inline-block 元素根本不起作用
line-height 只影响行内级内容（如纯文本、span）所在的**行框（line box）**高度，而 display: inline-block 元素本身是**块级盒子**，它被当作一个整体“塞进”行框里，并不参与行高计算。你给它设 line-height: 40px，浏览器会忽略——它既不撑高行框，也不调整自身内部文字位置。
常见错误现象：button 或带 display: inline-block 的 div 里文字偏上/偏下，调 line-height 没反应；DevTools 里看到 computed line-height 值正常，但视觉完全没变化。
- 确认元素真实 display 类型：用 DevTools 的 Computed 面板看
display最终值，别只信你写的那行 CSS - 如果目标是让这个 inline-block 容器里的文字居中，得换思路：要么把它内部文字包在
span里并设line-height（前提是容器高度固定且单行），要么直接给容器加display: flex; align-items: center; - 别试图用
vertical-align补救——它只对 inline-level 元素有效，且会和父行框的基线交互，反而更难控
inline-block 容器内文字不居中，真正该调的是它的父行框
当一个 display: inline-block 元素放在段落或 div 里，它和周围文字共处一行。此时它的垂直位置由其父容器的 line-height 和自身的 vertical-align 共同决定，而不是它自己的 line-height。
比如：div 设了 line-height: 2em，里面放一个 display: inline-block 的按钮，按钮底部会默认对齐到这行文字的基线（baseline），看起来就是“挂”在下方。
- 检查父容器的
line-height和font-size：它们决定了整行的高度和基线位置 - 给 inline-block 元素显式设
vertical-align: middle（不是center），它会按父行框的 x-height 中点对齐，比 baseline 更接近视觉中心 - 移动端 Safari 对
vertical-align: middle渲染有偏差，可加font-size: 0在父容器临时消除行框干扰，再在子元素里重置字体大小
为什么加了 vertical-align 还是偏移？因为基线不等于视觉中心
vertical-align 的对齐锚点是**基线（baseline）**，不是盒子中线。而中文字体、图标字体、SVG 的基线位置差异极大——PingFang SC 的基线比 Noto Sans CJK 高约 2px，icon font 甚至可能把基线设在底部边缘。
你看到的“不居中”，大概率是基线对齐逻辑和你预期的几何中心不一致。这不是 bug，是字体度量本身的事实。
- 用 DevTools 的 Elements 面板 hover 文本，看实际渲染出的行框（line box）上下边界，对比容器 height
- 避免混合使用系统字体和 WebFont：同一行里
span用 Inter、svg用 icon font，基线必然错位 - 真要精确控制，放弃
vertical-align，改用display: flex或display: grid，它们对齐的是盒模型边界，不依赖字体
替代方案：什么时候必须切到 flex？
只要出现以下任一情况，line-height + vertical-align 就不再是调试选项，而是技术债源头：
- 按钮里含
svg或img—— 它们是替换元素，默认vertical-align: baseline，且无法用line-height调整 - 需要响应式字号（如
font-size: clamp(1rem, 2.5vw, 1.25rem)）——line-height很难保持比例同步 - 容器高度由
min-height或vh动态决定 ——line-height是静态值，无法适配 - 要兼容 iOS Safari 15 以下或 Android WebView —— 这些环境对基线计算差异更大，尤其在中英文混排时
这时候写 display: flex; align-items: center; 不是“升级”，而是回归常识：你本就不该让字体度量决定 UI 位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
