issues centering text in nav bar

Question

I'm having issues with centering the text in my navigation bar. I've tried everything I can think of. Any help would be greatly appreciated.

What I have here is my navigation bars html and css code. I have tried centering it and using other means but am still stuck.

hTML

<div class="content-outer" id="top_nav">
            <div class="content-inner">
                <ul>


<li><a href="#">Home</a><li>
<li><a href="#">Digital</a></li>
<li><a href="#">Film</a></li>
<li><a href="#">Timeline</a></li>
<li><a href="#">Contact</a></li>                      
                </ul>
            </div>
        </div>

css

.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}


#top_nav { 
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}

#top_nav ul {
margin:0; 
padding:0px 0; 
list-style:none; 
width:990px; 
text-align: center;
overflow:hidden;
}

#top_nav ul li {
margin:0 56px 0 0; 
padding:0; 
font-size:1.7em; 
text-transform:uppercase; 
float:left; 
font-weight:bold;
}


#top_nav ul li a {
color:#fef6e9; 
text-decoration:none;
display: block;
}

#top_nav ul li a:hover {
color:#ed7163; 
text-decoration:none;
}


.content { padding: 10px 0;}

.content-outer { width:100%; float:left; overflow:visible; }

.content-outer .content-inner { width:978px; margin:0 auto; overflow:visible;         position:relative; }

Answer 1

Here is the answer in simplest form

<nav>
    <ul>
        <li><a href="#">Home</a><li>
        <li><a href="#">Digital</a></li>                    
    </ul>
</nav>

CSS

ul {
  display: block;
  text-align: center;
}

li {
  display: inline-block;
}

In conclusion: set the "ul" tag to display:block and then center text

Answer 2

Instead of giving just a margin-right for each li element like I can see in your code margin: 0 56px 0 0;, why you don't give equal margin left and right to each li tag?

For example: margin:0 34px 0 34px;

It could be a quick solution.

Check this DEMO:

http://jsfiddle.net/4n9hq/1/

Answer 3

Is this what you are looking for?

I removed the extra divs; created a nav element; put margin: 0 auto; on the ul; replaced the float: left on the li with display: inline-block; and there you have it!

HTML

---

<nav id="top_nav">
    <ul>
        <li><a href="#">Home</a><li>
        <li><a href="#">Digital</a></li>
        <li><a href="#">Film</a></li>
        <li><a href="#">Timeline</a></li>
        <li><a href="#">Contact</a></li>                      
    </ul>
</nav>

CSS

---

#top_nav { 
  position:fixed;
  background:#343642;
  font-family: Impact, Charcoal, sans-serif;
  width: 100%;
}
#top_nav ul {
  margin: 0 auto; 
  padding:0px 0; 
  list-style:none; 
  width:990px; 
  text-align: center;
}  
#top_nav ul li {
  margin:0 56px 0 0; 
  padding:0; 
  font-size:1.7em; 
  text-transform:uppercase; 
  display: inline-block;
  font-weight:bold;
}
#top_nav ul li a {
  color:#fef6e9; 
  text-decoration:none;
  display: block;
}
#top_nav ul li a:hover {
  color:#ed7163; 
  text-decoration:none;
}