垂直对齐跨度与li中的文本

Question

我有以下内容：

<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>

页面中有一堆CSS，这是我一直在研究的最相关的：

.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;
}

在我的twitter-bootstrap网站上，它目前在图片中呈现：

我希望有更好的垂直对齐方式。

特别是我想尝试使用>符号图标和文本来获得相同的基线，即三个项目的底部对齐。

或者我想尝试其中三个让中心在同一条线上对齐。

我不知道如何获得这两者中的任何一个。

这是一个JSFiddle：

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

Answer 1

对于此特定问题，您需要确保图标范围也垂直对齐

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;
}