Question

我有一个20 x 50像素的图像，并希望用一些20px字体的文本内联显示它。我想要文本在行的中间，Text是坚持降低，我希望它在行的中间。由于图像高度为50像素，字体为20像素。我尝试填充图像（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>

有没有办法在该行的中间（y轴）显示文字，左边是图片？

Answer 1

您可以将 verticle-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>

Answer 2

如果您使用精确像素，那么您可以使用类似的东西 -

<div style="display:inline; vertical-align:middle ">
 <a href="./waterbill" title="Water Bill Detail">
 <img style="width: 20px; height: 50px; " src="Coding.jpg" />
 </a>&nbsp;
 <a href="./waterbill" style="position:absolute;top:25px" title="Water Bill Detail"> Water Bill Details </a>
</div>

如何在行之间显示内嵌文本的图像和文本

2 个答案: