center a navigation

[dinger2121]

Hello,
I am using the below style sheet to create my navigation. It is working fine, but is left aligned on the page. Can someone help me set it up so that the nav is dynamically center aligned on the page?
Thanks for any help.

here is my css -

body {
margin-right: auto;
margin-left: auto;
text-align: center;
padding: 25px;
margin: 0;

}

ul.pink {
padding: 5px;
margin: 0px auto;
list-style: none;
background-color: #fff;
border-bottom: 1px solid #e7e7e7;
float: left;
clear: left;
}

ul.pink li {
float: left;
}

ul.pink li a {
float: left;
text-decoration: none;
color: #ccc;
padding: 4px 15px 0 0;
margin-right: 8px;
font: 900 14px "Arial", Helvetica, sans-serif;
}

ul.pink li a span {
float: left;
padding-right: 15px;
display: block;
margin-top: -4px;
height: 24px;
}

ul.pink li a:hover {
color: #860737;
background: url(../img/pink.png) no-repeat top right;
}

ul.pink li a:hover span {
background: url(../img/pink.png) no-repeat top left;
}

ul.pink li a.current {
background: url(../img/pink.png) no-repeat top right;
color: #860737;
}

ul.pink li a.current span {
background: url(../img/pink.png) no-repeat top left;
}

 

[Vragabond]

With the navigation in whole and each individual item being floated to the left, it is very hard to center it. You would have to put it inside another element, which would best assess the width of the entire navigation (again hard because of no fixed widths) and center that. Unfortunately, there is no other way.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]