为什么无法垂直对齐？图像在div左侧

Question

虽然我多次成功使用了vertical-align，但是现在还是遇到了一些问题。在这种情况下，我在左边放置了一张图片，在右边放置了一个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，但没有任何作用。有人能解释一下发生了什么吗？非常感谢。

- Kevin doesmath

---

在父级div上使用vertical-align:middle。 - tech2017

我刚刚尝试了这个，但没有成功。我已经编辑了我的代码，并加上了父级div。 - Kevin doesmath

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>

- Asons

---

啊，浮点数是罪魁祸首。谢谢。 - Kevin doesmath

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>

- VXp

Answer 3

尝试将父元素设置为display:table，将img元素设置为display:table-cell和vertical-align。

- Pedro Costa