如何水平对齐 css 精灵？
目前，我的所有 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>
At the moment all of my css sprites are aligned vertically and not in the correct format. How would I align them horizontally? This is an example of one of my buttons:
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;
}
I now can't align them to the center using this:
#social_cont {
text-align: center;
background: url(images/banners/banner1.jpg);
height: 254px;
}
and this html:
<div id="social">
<a class="facebook" href="http://facebook.com/projectstratos"></a><a class="twitter" href="http://twitter.com/projectstratos"></a>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你可以先看看这个：
如果不起作用为您手动定位：
You can first check out this:
If it doesnt work for you, position manually:
如果您希望链接图标水平对齐，请将
float:left添加到a.youtube的 CSS 声明中。至于居中，您应该简单地确保您的精灵被设计为精确适合 64x64 像素容器。 （您不能在此处使用
background-position:center center;，因为它会将容器中的整个背景图像居中）。If you want your link icons to be aligned horizontally, add
float:leftto the CSS declaration fora.youtube.As for centering, you should simply ensure that your sprite is designed to precisely fit the 64x64 px container. (You can't use
background-position:center center;here because it would center the whole background image in your container).