html - 为什么这不会垂直对齐？ img 到 div 的左边

Question

虽然我已经成功使用了很多次，但我仍然无法使用垂直对齐。在这种情况下，我在左边有一个 img，在右边有一个 div，这是我的代码:

.review {
  font-size: 1em;
}

.avatarImg {
  float: left;
  width: 25%;
}

.reviewBlock {
  width: 75%;
  float: left;
}

<div class="review">
  <img class="avatarImg" src="http://via.placeholder.com/200x200" alt="">
  <div class="reviewBlock"> <!-- misc elements --> </div>
</div>

我的 img 比我的 reviewBlock 短几个像素，所以我希望它可以向下移动而不必使用 margin-top。据我所知，已经建立了一个基线，请看这些图片。

我已经尝试在 img 和 div 上放置 display:inline-block 以及 vertical-align:middle 但它没有做任何事情。谁能解释这里发生了什么？非常感谢。

Answer 1

添加display: inline-block; vertical-align: middle;到这两个元素将使它们对齐。

确保您也删除了 float , 否则这将不起作用

原样inline-block我还通过评论 <!-- --> 将它们连接起来，从而删除了两者之间的空白区域

.review {
  font-size: 1em;
}

.avatarImg {
  display: inline-block;
  vertical-align: middle;
  width: 25%;
}

.reviewBlock {
  display: inline-block;
  vertical-align: middle;
  width: 75%;
}

<div class="review">
  <img class="avatarImg" src="http://placehold.it/100/f00" /><!--
  --><div class="reviewBlock">
    Blaa blaa<br> Blaa blaa<br> Blaa blaa<br> Blaa blaa
  </div>
</div>