html - 垂直对齐 span 与 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;
}