Centering unordered list of images - html

Question

I'm trying to center a horizontal list of image links, though it seems that the left of the images are being centered. As you can see, the center of the list of images (which are all the same size) is slightly to the right of the text.
HTML:
<div id='nav'>
<ul>
<li>
<a href=''><img src='images/login.png' /></a>
</li>
<li>
<a href=''><img src='images/add.png' /></a>
</li>
<li>
<a href=''><img src='images/forum.png' /></a>
</li>
</ul>
</div>
Css:
#nav {
text-align: center;
}
#nav ul {
list-style: none;
margin: 20px auto;
}
#nav li {
display: inline-block;
margin: 0px 30px;
}
What can I do to completely center it?

Answer 1

Working Demo : http://jsfiddle.net/3d6TS/
The <ul> tag by default adds padding. You need to set padding:0 manually to <ul> tag.
#nav ul {
list-style: none;
margin: 20px auto;
padding:0;
}

Answer 2

#nav { text-align: center; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
the solution is the display:inline on the li

Answer 3

A good solution would be to maintain the margin-left and make sure the first child has a left margin of 0. This causes both the first and last children to have no margins on the edges it meets with the parent. This is good as :first-child doesn't catastrophically break styles in >=ie7 where as :last-child is unsupported in <=ie8 making the reverse of this infeasible for the time being.
#nav ul li {
display: inline-block;
margin-left:30px;
}
#nav ul li:first-child {
margin-left:0;
}