title: How to vertically align a 'span' in a 'div' with icon present?
body: <p>I tried to vertically align a <code>span</code> in a <code>div</code> by css <code>line-height</code> and div <code>height</code>.
  All works fine, but the center <code>span</code> shifts to the bottom when the <code>icon span</code> is added.
  Could anyone give me a hint? Thanks.</p>
  
  <pre><code>  &lt;span class="icon"&gt;&lt;/span&gt;
  </code></pre>
  
  <p><strong>Failed at vertical align</strong><br>
  <a href="http://jsfiddle.net/9CJvm/" rel="nofollow">http://jsfiddle.net/9CJvm/</a></p>
  
  <p><strong>Works fine without icon span</strong><br>
  <a href="http://jsfiddle.net/9CJvm/1/" rel="nofollow">http://jsfiddle.net/9CJvm/1/</a></p>