title: How to vertical align elements inside a div
body: <p>I am a HTML/CSS newbie and vertical aligning of elements in side div is driving me crazy.  Basically, I have a <code>div</code> that contain a mix of text and images and all I wanted to do is vertically align the elements in the middle of th ediv.</p>
  
  <p>According to <a href="https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div">this post</a>:</p>
  
  <blockquote>
    <p><strong>Inline elements</strong> (and only inline elements) can be vertically aligned
    in their context via vertical-align: middle. However, the “context”
    isn’t the whole parent container height, it’s the height of the text
    line they’re in.</p>
  </blockquote>
  
  <p>So, I create a <code>SPAN</code> and event set the <code>diplay: inline</code> but nothing works:</p>
  
  <pre><code>&lt;div id="main_section" class="main_align" &gt;
      &lt;span class="inline"&gt;
          &lt;span class="inline"&gt;&lt;img src="http://placehold.it/50x50" /&gt;&lt;/span&gt;
          &amp;nbsp;
          &lt;span class="small inline"&gt;A Very Small Text&lt;/span&gt;
          &amp;nbsp;
          &lt;span class="medium inline"&gt;Medium String&lt;/span&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/marcoslin/vGKjj/2/" rel="nofollow noreferrer">jsfiddle</a>.</p>
  
  <p>Any pointers will be greatly appreciated.</p>
  
  <p><strong>Note</strong>:  I am happy if this works in Chrome and Firefox.  No need to address IE specific issues.</p>