为什么这不会垂直对齐？ 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 之间的白色 space 通过评论连接它们 

.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

尝试将父元素与 display:table 和 img 元素与 display:table-cell 和 vertical-align

Answer 3

您也可以使用 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>

为什么这不会垂直对齐？ div 左边的图片

Why won't this vertically align? Img to the left of div

html

css

vertical-alignment