CSS中vertical-align:middle的实际工作机制与对齐规则是什么？

基础作用规则 #

• vertical-align 仅对inline-level、inline-block、table-cell类型的元素生效，不对普通文档流的块级元素产生作用。
• 所有对齐计算的参考基准都是行框（line box）的排版基线体系，不存在“当前元素和相邻兄弟元素做相对对齐”的内置逻辑。
• 行框的默认基线，是该行内所有保持默认vertical-align:baseline的元素中，位置最低的文本基线；默认状态下，img这类替换元素的底部会自动对齐行基线，呈现出文字贴着图片底部排版的视觉效果。

对应场景的实际运行逻辑 #

为什么给img设置vertical-align:middle时，视觉上看起来是span位移、图片没动？ #

这个场景下样式是直接作用在img上的，视觉错觉来自行基线的整体偏移：

• 按照定义，设置该属性后，img自身的垂直中线，会对齐到「父内容盒的基线位置 + 父元素x-height的1/2」的坐标点。
• 因为img是当前行内尺寸最大的元素，它的位置调整会直接重构该行的基线锚点。行内的两个span保持默认的vertical-align:baseline属性，会自动跟随新的基线位置排版，视觉上就呈现出“文字向上移动到图片中间”的效果，本质是基线锚点变化带动span位移，不是span主动被调整了位置。
• 示例中的父元素为body，计算时参考的基线就是body默认内容区的文本基线，x-height取自body默认字体的小写x字高。

为什么直接给span设置vertical-align:middle看不到预期的对齐效果？ #

这个样式是完全生效的，只是位置变化的参照被混淆了：

• 两个span的字体、尺寸完全一致，当它们都设置vertical-align:middle时，会统一对齐到行中线上，彼此之间的相对位置不会发生变化。
• 此时行内的img依然保持默认的vertical-align:baseline状态，也就是固定在“底部对齐行基线”的默认位置。原本和基线齐平的span被抬到了行中线位置，和未调整对齐属性的img形成明显高低差，就会出现“未达到预期对齐效果”的视觉感受，本质是样式已生效，只是参照对象的位置未同步调整。

vertical-align:middle 的固定计算流程 #

这个属性值的计算没有复杂的联动判断，是标准化的坐标映射：

1. 定位当前元素所属行的父内容盒，提取两个固定参考参数：
   • 父内容盒的默认文本基线y坐标
   • 父元素字体的x-height数值（即小写x的字身高度）
2. 计算对齐参考线的y坐标：基线y坐标 - x-height / 2
3. 垂直移动当前设置了vertical-align:middle的元素，让元素自身的垂直中线（即元素自身高度1/2的位置）与上述参考线完全重合。

常见认知误区 #

vertical-align从来不会主动参考相邻兄弟元素的位置做对齐调整，你看到的元素间对齐效果，只是不同元素基于同一套行基线规则计算位置后，自然呈现的视觉结果。 #

内容的提问来源于stack exchange，提问作者Knownow