Trying to center a ul list in a container inside... sprites in li a - html-lists

Question

Hello i am developing a web site.... its my second one, and i am trying to center a ul inside a div
i want to place icons in anchor tags and use background positioning for sprite use.... the thing is how can i set to center the ul inside the div or inside the ul ...
example of my code here:
http://jsfiddle.net/kowen/wAdf3/1/
here is the code: (html)
<div id="container">
<ul>
<li><a class="fbicon" href="#">hola 1</a>
</li>
<li><a class="twttricon" href="#">hola 2</a>
</li>
<li><a class="sndcloudicon" href="#">hola 3</a>
</li>
<li><a class="emailicon" href="#">hola 4</a>
</li>
</ul>
and css:
#container {
width: 400px;
height:400px;
text-align: center;
background-color:gray;
}
#container ul {
display: inline-block;
}
#container li {
/* float: left;*/
height: 33px;
line-height: 30px;
text-indent:-999em;
}
#container li a {
width:32px;
height:32px;
background-image:url(http://www.testcloud.com.ar/social-icons.png);
}
a.fbicon {
background-position:-5px center;
}
a.twttricon {
background-position:-42px center;
}
a.sndcloudicon {
background-position:-111px center;
}
a.emailicon {
background-position:-148px center;
}
i have tried a few recipes but no clue how can i do that....
how can i get the a displayed as a block so it can be shown the full icon on screen???
thanks in advance for your help.
Salutations