title: vertical align middle li with images
body: <p><a href="http://jsfiddle.net/fzbhao5v/" rel="nofollow">http://jsfiddle.net/fzbhao5v/</a></p>
  
  <pre><code>&lt;li&gt;
      &lt;img src="http://dummyimage.com/50x50/000/fff" /&gt;&lt;span&gt;Name&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I can do position relative and negative top to adjust the span up but the problem is I want the image to be responsive, so the relative solution doesn't really work in my case. </p>
  
  <p>How to ensure my <code>span</code> within the <code>li</code> always be at the middle?</p>