html - 如何显示图像和文本与行之间的文本内联

Question

我有一张 20 x 50 像素的图像，并希望将其与一些字体大小为 20 像素的文本内联显示。
我想要文本在行的中间，文本粘在较低的位置，我想要它在行的中间。由于图像高度为 50px，字体为 20px。
我尝试填充图像(Padding-top:20px;)但它会影响整行。

    <div  style="display:inline; ">
      <a href="./waterbill" title="Water Bill Detail"> 
       <img style="width: 20px; height: 50px; padding-top: 25px;" src="images/useful/phed-water-drop.png" />
      </a>&nbsp; 
   </div>
  <div  style="display:inline; white-space:nowrap;">
    <a href="./waterbill" title="Water Bill Detail"> Water Bill Details </a>
  </div>

Is there any way to show text in the middle (y axis) of the line, with image in its left ?

Answer 1

您可以使用vertical-align 作为:

<div style=" margin-top: 25px;">
  <div style="display: inline; white-space: nowrap;">
   <a href="./waterbill" title="Water Bill Detail">
      <img style="width: 20px; height: 30px; vertical-align: middle;" src="images/useful/phed-water-drop.png"/>
   </a>&nbsp;
  <a href="./waterbill" title="Water Bill Detail" style="vertical-align: sub;">Water Bill Details </a>
  </div>
</div>