如何水平对齐 CSS 精灵？答案

【问题标题】：How is it possible to align css sprites horizontally?如何水平对齐 CSS 精灵？
【发布时间】：2011-07-09 09:41:37
【问题描述】：

目前我所有的 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>

【问题讨论】：

水平还是垂直？下定决心。
格式不正确怎么办？

标签： css button alignment css-sprites

【解决方案1】：

你可以先看看这个：

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

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

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

【讨论】：

这行得通，但是现在我无法将它们居中，我已经用所有代码更新了问题

【解决方案2】：

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

【讨论】：