css vertical align 为什么不生效_对齐属性使用条件解析

vertical-align 仅对 inline、inline-block、table-cell 元素生效，作用于行内格式化上下文中的基线对齐，非容器级垂直居中工具；设在块级元素上被忽略，对齐基准是 line-height 生成的行内框中线，非父容器中心。

vertical-align 为什么加了也不起作用？

因为它根本不是给“容器”用的垂直居中工具，而是行内格式化上下文（IFC）里调节**行内级元素基线位置**的属性。加在 div、section 这类块级元素上，浏览器直接忽略——不是 bug，是规范如此。

哪些元素能用 vertical-align？

只对三类元素生效：

• display: inline（如 span、em）
• display: inline-block（最常用，比如图片、按钮、图标）
• display: table-cell（需配合 display: table 的父容器）

常见错误：给 img 加 vertical-align: middle 却没改它的 display ——其实 img 默认就是 inline，所以这步通常不用改；但如果你给它加了 Float 或 position: absolute，它就脱离了行内流，vertical-align 立刻失效。

为什么设置了 middle 还是偏上/偏下？

因为 vertical-align 的对齐基准不是父容器高度，而是「行高」（line-height）决定的「行内框」。没有 line-height，就没有对齐空间。

立即学习“前端免费学习笔记（深入）”；

典型场景：文字旁放一张 img，想让它和文字中线对齐，但总卡在底部。原因很可能是父容器（比如 p 或 div）没设 line-height，或设得太小。

.wrapper {   line-height: 2em; /* 关键！提供足够高的行内框 */ } .wrapper img {   vertical-align: middle; /* 对齐到该行内框的中线 */ }

注意：vertical-align: middle 是对齐到**行内框的中点**，不是父容器的中点；若父容器高度远大于行高，视觉上依然不居中。

替代方案比硬拗 vertical-align 更可靠

当你要真正实现「容器内内容垂直居中」，vertical-align 往往不是第一选择。它天生受限于行内流，一旦涉及多行、固定高、弹性内容，就容易失控。

• 单行文本+图标/图片 → 用 line-height + vertical-align 足够轻量
• 任意内容居中 → 改用 display: flex + align-items: center
• 老项目兼容 IE8–9 → 用 display: table / table-cell 套路
• 绝对定位居中 → top: 50% + transform: translateY(-50%)

别为了“用上 vertical-align”而强行改 display 或塞空格元素——它不是万能对齐开关，只是 IFC 里的一个微调旋钮。真正卡住的时候，换布局模型，往往比调试十种 line-height 更快。