vertically align span with text in li

Question

I have the following:

<div class="footer-content">
  <ul class="footer-category-list social-icons">
    <li>
      <a href="https://www.facebook.com/site" target="_blank" title="facebook"><span class="icon-facebook-sign social-icon-big"></span>
      Facebook
      </a>
    </li>
    <li>
      <a href="https://twitter.com/site" class="icon" target="_blank" title="twitter"><span class="icon-twitter-sign social-icon-big"></span>
      Twitter
      </a>
    </li>
  </ul>
</div>

there's a bunch of CSS in the page, this is the most relevant I've been working on:

.social-icon-big {
  font-size: 300%;
}

ul.social-icons li{
  line-height: 0;
  vertical-align: middle;
}

li div.social {
  display:table-cell;
  vertical-align: middle;
  height: 25px;
}

in my twitter-bootstrap website, it's currently rendered as in the image:

I would like the thing to have a better vertical alignment.

In particular I would like to try with the > symbol icon and text to have the same base line, that is the three items have the bottom aligned.

Or I would like to try with the three of them have the centers aligned on the same line.

I'm not sure how to obtain either of the two.

Here's a JSFiddle for the thing:

http://jsfiddle.net/am3Pe/2/

Answer 1

For this specific issue, you need to make sure that your icon span is vertically aligned as well

JSfiddle Demo

CSS

.icons-list>ul {
  list-style: none;
}

span[class*=social-icon] {
    display: inline-block;
    vertical-align: middle;
}

.social-icon-big {
  font-size: 300%;
}

ul.social-icons li{
  line-height: 0;
  vertical-align: middle;
}