title: Vertical align middle text and image in link
body: <p>Using the code below my text is vertically aligned bottom.  Need help vertical aligning the text middle with the icon in the link.</p>
  
  <p><a href="http://jsfiddle.net/s15199ds/7AGjB/" rel="nofollow">jsfiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;a href="/The-Experience.aspx" class="icon"&gt;
      &lt;span class="white bold"&gt;Learn More&lt;/span&gt;
      &lt;div class="arrow-white-right"&gt;&lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>a.icon { line-height:46px; vertical-align:middle; }
  .arrow-white-right { display:inline-block; height:46px; width:46px; background:url('/img/icons/arrow-white-glyph.png'); background-repeat:no-repeat; background-position:-50px 0; }
  .white { color:#fff; }
  .bold {font-weight:bold; }
  </code></pre>