html - 垂直对齐图像旁边的文本？

Question

为什么 vertical-align: middle 不起作用？然而，vertical-align: top 确实有效。

span{
  vertical-align: middle;
}

<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

Answer 1

实际上，在这种情况下非常简单:对图像应用垂直对齐。由于全部在一行中，因此您真正要对齐的是图像，而不是文本。

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

在 FF3 中测试。

现在您可以将 flexbox 用于这种类型的布局。

.box {
   display: flex;
   align-items:center;
}

<div class="box">
    <img src="https://via.placeholder.com/60x60">
    <span style="">Works.</span>
</div>