Navigation centered!?!

[therise03]

Ok so i have a div holding a navigation on my page. Its a fluid layout and the container is 90% wide. But sometimes when you resize the page, the navigation floats with it, and gets aligned to the lef,t which makes it look like its in the wrong position. I want to solve this problem by centering the navigation so it looks more in place. All i want to say is this forum rocks because of the quick and accurate responses, so thanks in advance and I hope you can help me out! Why arent multi level navigations easy?! here is my code:




<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="index.html">Home</a></li>
<li><a href="2008team.html">Team</a>
<ul>
<li><a href="2008team.html">2008</a></li>
<li><a href="2009team.html">2009</a></li>
</ul>
</li>
<li><a href="rules.html">Rules</a></li>
<li><a href="supporters.html">Supporters</a></li>
<li><a href="contact.html">Contact</a> </li>
</ul>
<br style="clear: left;" />
</div>
<!-- navigation-->




and here is the css:




.suckertreemenu ul {
list-style-type: none;
}

.suckertreemenu ul li {
display: inline;
position: relative;
border-bottom: 1px solid #cccccc;
float: left;
}

.suckertreemenu ul li a {
display: block;
width: 90px;
padding: 1px 10px;
text-decoration: none;
color: #000000;
}



.suckertreemenu ul li a:visited {
display: block;
width: 90px;
padding: 1px 10px;
text-decoration: none;
color: #000000;
}




.suckertreemenu ul li ul {
left: 0;
position: absolute;
top: 1em;
display: block;
visibility: hidden;
}

.suckertreemenu ul li ul li {
display: list-item;
float: none;
}

.suckertreemenu ul li ul li ul {
left: 159px;
top: 0;
}

.suckertreemenu ul li ul li a {
display: block;
width: 100px;
color: #000000;
text-decoration: none;
padding: 1px 10px;
}

.suckertreemenu ul li a:hover {
background-color: #ff2b06;
color: white;
}

* html .suckertreemenu ul li {
float: left;
height: 1%;
}

* html .suckertreemenu ul li a {
height: 1%;
}

 

[shockie]

how about:

.suckertreemenu {
text-align: center;
}

 

[therise03]

sorry but that only puts the text within the buttons toward the middle...i need the whole div to go into the middle, so the buttons center themselves within the layout, rather than the text within the buttons being centered.