html - 为什么垂直对齐应用于图像也适用于同级文本？

Question

我只在图像上设置了vertical-align。

所以文本上的vertical-align应该是默认的vertical-align: baseline。

但为什么文本会移动到顶部、中间、底部？

<div style="background-color:#e5edff;">
  <img src="http://placehold.it/100x100" style="vertical-align:top;">aaa
</div>
<br>
<div style="background-color:#e5edff;">
  <img src="http://placehold.it/100x100" style="vertical-align:middle;">bbb
</div>
<br>
<div style="background-color:#e5edff;">
  <img src="http://placehold.it/100x100" style="vertical-align:bottom;">bbb
</div>

The demo on code pen

Answer 1

发生这种情况是因为 img 是 block 中最大的元素。事实上，img 正在执行您所期望的操作。但是，因为该 block 与 img 的大小相同，所以看起来文本是相对于 img 移动的。

看看下面的 fiddle 。这显示了当 img 不再是 block 中最大的元素时会发生什么，只需将文本包装在其自己的具有明确高度的 div 中:

https://jsfiddle.net/csazuk0u/