I found today that using the 'li' tag is the best way for me to centre align text with images easily.

All is perfect, until I want to use retina.js for HD images for HD/Apple retina displays. On a normal (non-HiRes display) the image shows great, then on a HiRes display any image with @2x gets its height squished.

Any thoughts on workarounds, solutions?

Thanks in advance :)

  <ul>
        <li><span class="social_bar_text">Ask us your  questions</span> </li>
        <li><span class="social_bar_icon"><img src="images/site/twitter_icon.png" width="50" height="50" alt="Twitter" /></span> 
<span class="social_bar_icon"><img src="images/site/facebook_icon.png" width="50" height="50" alt="Facebook" /></span> 
<span class="social_bar_icon"><img src="images/site/email-icon.png" width="50" height="50" alt="Email" /></span></li>
      </ul>

  #social_bar {
  background-color: #414141;
  color: #FFF;
  width: 100%;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 20px;
  vertical-align:middle;
}
#social_bar li {
  list-style-type: none;
  display: inline;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;

    height: 100px;
    line-height: 100px;

}
#social_bar li img {
  vertical-align: middle;
  padding-right: 10px;
  padding-left: 10px;
}
.social_bar_text {
  font-size: 1.5em;
  vertical-align:middle;

}