Align <li> in center? SOLVED

[Jack Franklin]

I have this navigation:

Code: Select all

<div id="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="submit.php">Submit</a></li>
<li><a href="news.php">News</a></li>
<li><a href="siteofmonthaward.php">Site of the Month</a></li>
<li><a href="mostviewed.php">Most Viewed</a></li>
<li><a href="toprated.php">Top Rated</a></li>
</ul>
</div>

And the CSS:

Code: Select all

#navigation {
width: 950px;
height: 60px;
margin: 0;
padding: 0;
text-align: center;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
#navigation ul li {
float: left; */Placed there for IE7*/
}
#navigation ul li a {
float: left;
margin: 0 0 0 20px;
padding: 7px;
border: 3px solid black;
border-top: none;
}

But whatever I try, I cannot get the ul or li's to display in the center! Anyone got a solution?

Thanks,

Jack

[marSoul]

Are you sure ?
I can see them in center of your 950px width navigation !

[Jack Franklin]

Is it something to do with the float: left?

Anyway, yes I am Absolutely positive. In IE & FF. It's aligned left. It makes no sense!

[Jack Franklin]

Did it. Gave the <ul> a width and added margin: 0 auto.

SOLVED.

[dab42pat]

Not sure if this is what you are after but if you change your width to 650px in your #navigation that should centre it on the page.

Pat