CSS HELP

I'm trying to use an unordered list and background images with css to create a
nav bar. It works fine with a single line, but if i need more than one row of
buttons i can't get the second row to centre across the page width. All the
buttons are on the left. If i change "float left" to "float centre" i just get
a long list running down the centre of the page. How do i set it so that it
will display the buttons in rows, but centred on the page.
Here is the code i am using.

#navlist {
font-size: .9em;
margin: 16px 0 2.5em 0;
width: 100%;
}
#navlist li {
float: left;
list-style-type: none;
margin: 0 0 1em 0;
padding: 0;
white-space: nowrap;
}
#navlist ul {
margin: 0;
padding: 0;
}
#navlist a {
padding: 3px 10px 3px 22px;
border: 1px solid;
border-color: #ddd #000 #000 #ddd;
background-color: #999999;
background-image: url(assets/l1_down.jpg);
background-repeat: no-repeat;
background-position: 0% 50%;
text-decoration: none;
}
#navlist a:link, #navlist a:visited {
color: #EEEEEE;
}
#navlist a:hover, #navlist a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
background-color: #9F6F9F;
background-image: url(assets/l1_over.jpg);
background-repeat: no-repeat;
background-position: 0% 50%;
color: #2D1E2D;
}

Regards
Steve
www.strelitzia.co.uk