title: css: vertical-align image with text inside span
body: <p>Here a small demo of my issue...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body&gt;
    &lt;span style="border: 1px solid black; background-color: #CCCCFF"&gt; My text 
        &lt;img style="width: 1em; height: 1em; vertical-align: middle;" 
        src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"&gt; My text &lt;/span&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see I have styled the image <code>vertical-align: middle</code> but still the image is misplaced at the bottom. </p>
  
  <p>How do I get it centered between the top and bottom borders?</p>
  
  <p><strong>EDIT:</strong> Here's a good rundown of this issue:</p>
  
  <p><a href="http://phrogz.net/css/vertical-align/" rel="nofollow">http://phrogz.net/css/vertical-align/</a></p>