Question

目前我的所有css精灵都垂直对齐而且格式不正确。我如何水平对齐它们？这是我的一个按钮的示例：

a.youtube {
    background: url(images/icons.png) no-repeat 0 0;
    height: 64px;
    width: 64px;
    display: block;
    background-position: 0 -128px;
}

a.youtube:hover {
    background-position: -64px -128px;
}

我现在无法将它们与中心对齐：

#social_cont {
    text-align: center;
    background: url(images/banners/banner1.jpg);
    height: 254px;
}

和这个html：

<div id="social">
    <a class="facebook" href="http://facebook.com/projectstratos"></a><a class="twitter" href="http://twitter.com/projectstratos"></a>
</div>

Answer 1

您可以先查看：

http://www.w3schools.com/css/css_align.asp

如果它不起作用，请手动定位：

http://www.w3schools.com/css/pr_class_position.asp

Answer 2

如果您希望链接图标水平对齐，请将float:left添加到a.youtube的CSS声明中。至于居中，您应该确保您的精灵设计为精确适合64x64 px容器。（你不能在这里使用background-position:center center;，因为它会将整个背景图像置于容器中心。）

如何水平对齐css sprites？

2 个答案: