Perfectly Center li inline block elements? - html

Question

This following inline block li elements are not perfectly centered, I can send the full code if you need it. Do you know a way to have them perfectly centered keeping their position at default?
<div id="abovenavigation">
<ul id="container">
<li><h1 class="Home">HOME</h1></li><!--
--><li><h1 class="About">ABOUT</h1></li><!--
--><li><h1 class="Blog">BLOG</h1></li><!--
-->
</ul><!--ends container-->
</div><!--ends upper navigation-->
<div id="undernavigation">
<ul id="container">
<li><img class="facebook" src="Facebook.png" width="53px" height="50px" onclick="this.src='Facebookhov.png'" onmouseover="this.src='Facebookhov.png'" onmouseout="this.src='Facebook.png'"/></li>
<li><img class="twitter" src="Twitter.png" width="53px" height="50px" onclick="this.src='Twitterhov.png'" onmouseover="this.src='Twitterhov.png'" onmouseout="this.src='Twitter.png'" /></li>
<li><a href:"mailto:gaaren03#gmail.com"><img class="mailto" src="Mailto.png" width="53px" height="50px" title="gaaren03#gmail.com" onclick="this.src='Mailtohov.png'" onmouseover="this.src='Mailtohov.png'" onmouseout="this.src='Mailto.png'" /></a></li>
</ul>
</div><!--ends undernavigation-->
li {
margin:0 20px;
font-size:18px;
display:inline-block;
text-align:center;
}

Answer 1

Just add text-align: center to the ul. :)
codepen: http://codepen.io/anon/pen/xGgpLK
li {
margin:0 20px;
font-size:18px;
display:inline-block;
}
ul {
text-align: center;
}

Answer 2

You could either give the list items a fixed width seeing as you have them set to display: inline-block. Or if you are supporting IE8 and above you could set the ul to display:table with a 100% width and the li to display: table-cell.
Fiddle
ul {
display:table;
width: 100%;
}
li {
padding: 10px;
font-size:18px;
display:table-cell;
text-align:center;
}
Hope this helps.