垂直對齊跨度與李

文本我有以下幾點：垂直對齊跨度與李

<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網站，它現在呈現在圖像中： how it's rendered

我希望事情有更好的垂直對齊。

特別是我想嘗試用>符號圖標和文字具有相同的基線，即三個項目有底部對齊。

或者我想嘗試與他們三個中心對齊在同一行上。

我不知道如何獲得兩者之一。

這裏有一個的jsfiddle的事情：

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

來源

2014-05-14 don giulio

這個'li div.social'將不會做任何事情，因爲你的'li'裏面沒有任何div（有一類'.social'或其他）。 JSfiddle請 –

你好，感謝您的反饋，這裏是jsfiddle：http://jsfiddle.net/am3Pe/ –

對不起，只是讓JSFiddle更接近我現在擁有的：http://jsfiddle.net/am3Pe/ 2/ –

對於這個特定的問題，你需要確保你的圖標跨度垂直對齊以及

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

來源

2014-05-15 15:13:18

你好，謝謝，但我認爲你從我的小提琴的舊版本開始。我首先發布了一個尚未完成的版本。我很抱歉造成的困惑。這是實際的：http://jsfiddle.net/am3Pe/2/ –

仍然有效，但您需要重新考慮精靈的位置。 –

謝謝，我已經完全刪除了UL/LI列表，現在看起來好多了。 –

垂直對齊跨度與李

回答

相關問題