水平对齐来自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的锚图像

回答

相关问题