如何在行间显示图像和文本内联文本答案

【问题标题】：how to show image and text inline with text in between the line如何在行间显示图像和文本内联文本
【发布时间】：2015-11-02 14:37:55
【问题描述】：

我有一个 20 x 50 像素的图像，并希望将它与一些字体大小为 20 像素的文本内联显示。
我想要文本在行的中间，文本被粘在较低的位置，我想要它在行的中间。由于图像高度为 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 轴）显示文本，而图像在其左侧？

【问题讨论】：

您能否详细说明“我想要文本在行的中间，文本被固定在较低的位置，我想要它在行的中间。”有没有机会用一张图片来描绘你想要的东西？
因为图像高度为 50 像素，字体为 20 像素，我希望文本位于行的中间（垂直）。

标签： html css asp.net

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：