title: how to show image and text inline with text in between the line
body: <p>I have a image of 20 x 50 px and want to show it inline with some text of font 20px size . <br> I want text in the middle of the line, Text is stick to lower, i want it in middle of the line. Since image height is 50px and font is 20px. <br>I have tried padding the image (Padding-top: 20px;) but it affects whole line. 
  <br></p>
  
  <pre><code>    &lt;div  style="display:inline; "&gt;
        &lt;a href="./waterbill" title="Water Bill Detail"&gt; 
         &lt;img style="width: 20px; height: 50px; padding-top: 25px;" src="images/useful/phed-water-drop.png" /&gt;
        &lt;/a&gt;&amp;nbsp; 
     &lt;/div&gt;
    &lt;div  style="display:inline; white-space:nowrap;"&gt;
      &lt;a href="./waterbill" title="Water Bill Detail"&gt; Water Bill Details &lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>Is there any way to show text in the middle (y axis) of the line, with image in its left ?</p>
  </blockquote>