How to center horizontal nav bar? - html

Question

How to center this thing ? I've tried couple ways but the nav. bar is not exactly in the middle of the site.
<style>
ul
{
background-color:red;
list-style-type:none;
}
li
{
float:left;
}
a
{
display:block;
text-decoration:none;
width:80px;
padding:20px;
text-align:center;
}
a:link
{
background-color:red;
}
a:hover
{
background-color:white;
}
</style>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Guys it works, the navbar is now centered correctly, but the text is not this time.
.......................
padding:0 to ul solves the problem.
thank you guys

Answer 1

Try this:
Remove float:left; and add display:inline-block; to li.
Add text-align: center; margin:0 auto; and a width to ul.
Change to this:
ul {
background-color:red;
list-style-type:none;
text-align: center;
margin: 0 auto;
width:80%;
}
li {
display: inline-block;
}
JSFiddle Demo

Answer 2

You can modify you CSS as following:
ul {
background-color:red;
list-style-type:none;
text-align: center;
margin-left: auto;
margin-right: auto;
width:80%;
}
li { display: inline-block;}
a {
display:block;
text-decoration:none;
width:80px;
padding:20px;
text-align:center;
}
a:link {background-color:red;}
a:hover { background-color:white;}
Notice 4 important lines added:
text-align: center;
margin-left: auto;
margin-right: auto;
width:80%; - set the desirable width if not 100%
width can be also specified in absolute units, like e.g. width:800px; alternatively, 2nd and 3rd lines can be replaced with a single statement: margin: 0 auto;
Demo: http://jsfiddle.net/e2TUC/
Hope this will help. Regards,