vertical-align 到底影响的是文本的位置还是图像的位置？

vertical-align在文中指代哪一部分内容？

从标题可见，提问者对vertical-align的作用存有疑问，尤其是文本的实际位置。

vertical-align的作用机制

一个未设定高度的div，若有文本内容，高度将由文本的行高撑起。而vertical-align则决定了行内元素（如inline-block、文本）相对于行框（line boxes）的垂直对齐方式。默认值为baseline，即元素基线与父元素基线对齐，其中文本基线指字母x的下方。

基于以上原理，我们分析页面中的现象：

1. 默认情况下，所有元素基线对齐。
2. 将img1设为top后，行框顶部与img1顶部对齐，img2向其位移到顶部为止。
3. 将img1设为bottom，img2设为top后，img1向下移动至行框底部，而文字仍在行框基线位置。
4. 综上所述，文本始终对齐行框基线，而其他元素的vertical-align仅影响行框内基线的位置，最终影响文本的位置。

因此，文本位置的实际决定因素并非vertical-align本身，而是行框基线相对于行框边界的相对位置，而该位置又受制于包含行内元素的图像的高度。