title: Social icons in footer
body: <p>Here is my html:</p>
  
  <pre><code>&lt;div class="footer-social"&gt;
      &lt;span&gt;Connect with us:&lt;/span&gt;
      &lt;li&gt;&lt;a href="http://www.facebook.com"&gt;
          &lt;img src='http://www.womenactionmedia.org/cms/assets/themes/crate/images/social/facebook.png' /&gt;
      &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.twitter.com"&gt;
      &lt;img src='http://grfx.cstv.com/schools/wis/graphics/icon_twitter24.jpg' /&gt;
  &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.youtube.com"&gt;
      &lt;img src='http://mylzh.net/wiki/worldofwarcraft/images/5/5d/Icon-youtube-22x22.png' /&gt;
  &lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>and here is my css:</p>
  
  <pre><code>.footer-social { float: right; margin-top:5px;}
  .footer-social li { display: inline;}
  .footer-social span { margin-top: -20px;}
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/qNTL2/" rel="nofollow">http://jsfiddle.net/qNTL2/</a></p>
  
  <p>I want the "Connect with us:" to be centered with the images, but it seems no matter how hard i try, it isn't working out. Anybody know why or possibly have a solution to my issue?</p>
  
  <p>Any help would be much appreciated! Thanks!</p>