为什么不垂直对齐？我在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。据我所知，已建立基线，请参阅这些图片。

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

Answer 1

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

确保您也删除了float，否则这将无效

因为它们是inline-block我还通过将它们与评论<!-- -->

连接来删除了2之间的空白区域

.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>

Answer 2

您也可以使用 Flexbox 执行此操作：

.review {
  display: flex; /* or "inline-flex" / displays flex-items (children) inline */
  align-items: center; /* centers them vertically */
}

<div class="review">
  <img class="avatarImg" src="http://via.placeholder.com/200x200" alt="">
  <div class="reviewBlock">This text is vertically centered.</div>
</div>

Answer 3

尝试将父元素与display：table和img元素放在一起显示：table-cell和vertical-align