html 垂直对齐图像旁边的文本 - 经过测试的代码

Posted 2021-05-11

<!-- Problem: Why won't vertical-align: middle work? And yet, vertical-align: top does work. 
    Reference: http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image
-->

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

<!-- Solution: Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text. -->

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="width:30px;height:60px;vertical-align:middle">
  <span style="">Works.</span>
</div>