水平對齊來自verticle css sprite的錨圖像

我在css垂直sprite中有4個圖像，我希望每個圖像在我的頁面上水平變爲href。從每個圖像之間的left:250pxtop:2px開始並且填充3px。水平對齊來自verticle css sprite的錨圖像

CSS

.sprites { 
    background:url('/pic/sprites.jpg')no-repeat top left; 
    width:36px; 
    height:36px; 
} 
.sprites.sprites.twitter { 
    background-position:0px 0px; 
} 
.sprites.sprites.facebook { 
    background-position:0px -46px; 
} 
.sprites.sprites.google-plus { 
    background-position:0px -92px; 
} 
.sprites.sprites.pinterest { 
    background-position:0px -138px; 
} 
.social {position:relative;left:250px;top:2px;}

我可以弄清楚如何在250px從左邊2px從頂部開始，但我無法弄清楚如何獲得作爲href的與填充水平去圖像的3px

HTML

<div class=social> 
<a href="http://www.example.com"><div class='sprites google-plus'></div></a> 
<a href="http://www.example.com"><div class='sprites facebook'></div></a> 
<a href="http://www.example.com"><div class='sprites twitter'></div></a> 
<a href="http://www.example.com"><div class='sprites pinterest'></div></a></div>

來源

2013-12-24 Kurt Marshman

你可以把它放在jsfiddle嗎？ – Chanckjh

您需要添加顯示：inline-block的/塊;取決於你想達到什麼，這應該適合你

來源

2013-12-24 00:27:58

我嘗試了內聯塊和塊都不工作。沒有改變。 –

你有沒有嘗試過將'vertical-align'中間應用到錨標籤？ – Bobby

我爲你製作了這個Jsfiddle，使用了一個佔位符圖像http://jsfiddle.net/Lq7Ne/ –

水平對齊來自verticle css sprite的錨圖像

回答

相關問題