垂直對齊跨度與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演示

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