在图像旁边垂直对齐文字？

小编典典

在图像旁边垂直对齐文字？

html

为什么不行vertical-align: middle？但是，vertical-align: top 确实可以。

span{

  vertical-align: middle;

}


<div>

  <img src="http://lorempixel.com/30/30/" alt="small img" />

  <span>Doesn't work.</span>

</div>

阅读 381

2020-05-10

共1个答案

小编典典

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

<!-- moved "vertical-align:middle" style from span to img -->

<div>

  <img style="vertical-align:middle" src="https://placehold.it/60x60">

  <span style="">Works.</span>

</div>

在FF3中测试。

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

.box {

   display: flex;

   align-items:center;

}


<div class="box">

    <img src="https://placehold.it/60x60">

    <span style="">Works.</span>

</div>

2020-05-10