title: How to Vertically Center Images on a Line?
body: <p>What's the best way to center icons on a line when the images are smaller than the line height?</p>
  
  <p>For example (styles inline for easier reading):</p>
  
  <pre><code>&lt;div style="line-height: 20px"&gt;
    &lt;img style="width: 12px; height: 12px;"/&gt;
    Blah blah blah
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/HeQEu/" rel="noreferrer" title="Here&#39;s a jsFiddle example">Here's a jsFiddle example</a>. This example also shows why <code>vertical-align: middle</code> does not work.</p>
  
  <p>I want the img to be centered against the text of the div. That is, even if the text wrapped to multiple lines, the image would be centered against a single line. Ideally, the solution would not involve setting margings/paddings on the image and would work even if I didn't know the line-height.</p>
  
  <p>Things I've read:</p>
  
  <p><a href="https://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css" title="How do I vertically align text next to an image with CSS?">How do I vertically align text next to an image with CSS?</a> (deals with case where image is larger, doesn't seem to apply here)</p>
  
  <p><a href="http://phrogz.net/CSS/vertical-align/index.html" rel="noreferrer" title="Understanding vertical-align">Understanding vertical-align</a></p>