Center horizontal navigation menu - html

Question

Struggling to center the nav bar in the middle of the browser... Tried a number of the things found through google but no luck as yet. Seems like it should be such an easy thing to do but its turned out to be a pain in the neck!
Heres the code.
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}

Answer 1

Try not using floats but rather display:inline-block instead.
JSfiddle Demo
CSS
ul {
padding: 0;
margin: 0;
}
#nav {
//width: 100%; /* not required */
//float: left; /* not required */
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
width:100%;
display: block;
list-style-type: none;
text-align: center; /* add this */
}
#nav li {
//float: left; /* remove */
display: inline-block; /* add this */
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
EDIT - added reset of ul padding/margin

Answer 2

Add a margin-top:50%; to it
just like this:
#nav {
width: 100%;
float: left;
margin-top:50%;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
Does this solve your problem?
Or didn't I understand your question ?

Answer 3

Just add text-align: center; in you #nav style. And reset UL default margin It should be like this
HTML
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
CSS
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
margin: 0;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}