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

小编典典

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

javascript

什么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>

阅读 141

2022-02-11

共1个答案

小编典典

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

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60">
  <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>

2022-02-11