How to center my UL navigation list?

Centering my UL navigation list... Help!

[justachild20]

All the menus on my navigation list are aligning left and I want them to be centered on the page, with automatic space between them. Is this possible? Below is the HTML and the CSS code for the site:


<div class="mainmenu">

<ul>
<li class="li_nc"><a href="http://www.example.com/" target="_self" >Home</a></li>
<li class="li_hc"><a href="http://www.example.com/about-example-example.html" >About</a>

<ul class="ul_ch">
<li class="li_nc"><a href="http://www.example.com/example-example-example.html" target="_self" >History</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example-example.html" target="_self" >Our example</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example-history.html" target="_self" >example</a></li>
</ul></li>
<li class="li_hc"><a href="http://www.example.com/example-example-courses.html" target="_self" >example</a><ul class="ul_ch">
<li class="li_nc"><a href="http://www.example.com/example-example-example-training-example.html" target="_self" >example</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example-example-training.html" target="_self" >example example Responder</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example-example-courses.html" target="_self" >example example example</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example.html" target="_self" >example + example example</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example-i-training.html" target="_self" >example EMT-I</a></li>
<li class="li_nc"><a href="http://www.example.com/customized-example-training-courses.html" target="_self" >Customized Courses</a></li>
<li class="li_nc"><a href="http://www.example.com/example-training-example-example.html" target="_self" >Class Schedule</a></li>
</ul></li>
<li class="li_nc"><a href="http://www.example.com/sponsoring-example-example-example-training.html" target="_self" >Sponsors</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example-students.html" target="_self" >Students</a></li>
<li class="li_hc"><a href="http://www.example.com/register-example-example.html" target="_self" >Register</a><ul class="ul_ch">
<li class="li_nc"><a href="http://www.example.com/example-form.html" target="_self" >Step 1: Registration Form</a></li>
<li class="li_nc"><a href="http://www.example.com/payment-options.html" target="_self" >Step 2: Payment Options</a></li>
</ul></li>
<li class="li_nc"><a href="http://www.example.com/contact-us.html" target="_self" >Contact</a></li>
</ul>


</div>





And the CSS:


body{
behavior: url(script/csshover2.htc);<!--hack per ie6-->
}


.mainmenu{
float: left;
width: 950px;
padding: 0;
}
.mainmenu ul {
float: left;
width: 950px;
list-style: none;
line-height: 1;
color:#FFFFFF;
background: #00006C;
padding: 0;
border: solid #FFFFFF;
border-width: 1px 0;
margin: 0 0 1em 0;
}

.mainmenu a, .mainmenu a:visited {
display: block;
font-family:Arial, Helvetica, sans-serif;font-size:0.8em;font-weight:bold;font-style:normal;text-decoration:underline;
color: #FFFFFF;
text-decoration: none;
padding: 1em 1em;
}
.mainmenu ul ul a{
width:100%;
height:100%;
}
.mainmenu ul a{
width:1%;
}


.mainmenu li {
float: left;
margin:0;
padding:0;
}

.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li a {white-space:nowrap;}

.mainmenu li ul {
position: absolute;
left: -999em;
height: auto;
width:15em;

background: #005900;
font-weight: normal;
border-width: 1px;
margin: 0;
}

.mainmenu li li {
width:15em ;
}

.mainmenu li li a{
width:13em ;
}

.mainmenu li ul {
margin: 0;
}
.mainmenu li ul ul {
margin: -2.8em 0 0 13.5em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
left: auto;
}
.mainmenu li:hover>ul.ul_ch
{
left: auto;
}

.mainmenu li:hover{
background: #CF1216;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
color:#FFFFFF;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
color:#FFFFFF;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
background: #CF1216;
z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
color: #FFFFFF;
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
color: #FFFFFF;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
color: #FFFFFF;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
color: #FFFFFF;
}

[edited by: limbo at 11:11 am (utc) on Apr 18, 2010]
[edit reason] Examplified [/edit]

[webeno]

don't be surprised, you float:left the mainmenu, of course it's not going to center. is there a specific reason you use it? if not, set instead margin: 0 auto or setup a wrapper div (include all your content into another main div) that has this margin: 0 auto property - it should work even if float:left is used in the child divs.

[limbo]

Hi justachild20. Welcome to WebmasterWorld :)

Your CSS and HTML needs to be simplified and validated. There's a lot of child properties called when just one will do.

Can you describe how you want them centred? Is the whole list from left to right, or the text centred in each list item?

It's a pain that you can't simply float:center; on block level elements so you're going to have to use a couple of tricks if you want to center every li element within the UL and still have block level control...

[Xapti]

My guess is he wants the anchor elements centered in the LIs. I believe setting text-align would work as long as he removed the float from the LI

First off.... what's with all the messed up CSS declarations. I see all these li li{}s, and even li li ul{}s. where the most nesting you have is ul ul li.

you will not be centering things when you have float:left on. you can use margin: (0 (or x) auto;" on block elements to center them, or text-align:center; on the container of inline content, which would make more sense in this case.

The main difference would be if you wanted the links to be clickable on the whole LI, so some extra padding around the text will be clickable - or just on the text, which is more straightforward, but users may miss the link-click if the padding is too much and/or font is too small.

to make the whole LI clickable, you want to make the anchor element block (by setting a CSS style display:block), and then doing the automatic margin style (centering) that I mentioned earlier.