How is it possible to align css sprites horizontally?

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 examp开发者_如何学Gole 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>

You can first check out this:

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

If it doesnt work for you, position manually:

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

If you want your link icons to be aligned horizontally, add float:left to the CSS declaration for a.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).