CSS rollovers query?

1

hey, im try to centre my navigation bar, ive used the rollover method shown here:
http://www.kirupa.com/css/css_rollovers.htm

ive got it working well, the only problem is i want them to be centred on screen relative to the browser. basically the navbar will go accross the entire browser.
i want the rollovers to be centred, not to the left as they are now.

what is the best way to do this without stuffin up my rollovers??

my HTML is:

 
<div id = "navbar">
  <ul id="navlist">
   <li><a href="#" id="home">Home</a></li>
   <li><a href="#" id="arrange">Arrange</a></li>
   <li><a href="#" id="prepaid">PrePaid</a></li>
   <li><a href="#" id="about">About</a></li>
   <li><a href="#" id="contact">Contact</a></li>
   <li><a href="#" id="faq">FAQ's</a></li>
  </ul>
 </div>

CSS is:


} #navbar {
 background-image: url(../images/Bance_navbar_repeat.gif);
 background-repeat: repeat-x;
 height: 34px;
 width: 100%;
 display: inline;
 text-align: center;
 
}
#home{ 
height: 34px; 
width: 98px; 
text-indent: 100000px; 
overflow: hidden; 
background: url(../images/Bance_home_button.gif) no-repeat left top; 
display: block; 
 float:left 
} 
 
#home:hover{ 
background-position: bottom left; 
} 
#arrange{ 
height: 34px; 
width: 187px; 
text-indent: 100000px; 
overflow: hidden; 
background: url(../images/Bance_arrange_button.gif) no-repeat left top; 
display: block; 
 float:left 
} 
 
#arrange:hover{ 
background-position: bottom left; 
} 
#prepaid{ 
height: 34px; 
width: 170px; 
text-indent: 100000px; 
overflow: hidden; 
background: url(../images/Bance_prepaid_button.gif) no-repeat left top; 
display: block; 
 float:left 
} 
 
#prepaid:hover{ 
background-position: bottom left; 
} 
#about{ 
height: 34px; 
width: 130px; 
text-indent: 100000px; 
overflow: hidden; 
background: url(../images/Bance_about_button.gif) no-repeat left top; 
display: block; 
 float:left 
} 
 
#about:hover{ 
background-position: bottom left; 
} 
#contact{ 
height: 34px; 
width: 145px; 
text-indent: 100000px; 
overflow: hidden; 
background: url(../images/Bance_contact_button.gif) no-repeat left top; 
display: block; 
 float:left 
} 
 
#contact:hover{ 
background-position: bottom left; 
} 
#faq{ 
height: 34px; 
width: 88px; 
text-indent: 100000px; 
overflow: hidden; 
background: url(../images/Bance_faq_button.gif) no-repeat left top; 
display: block; 
 float:left 
} 
 
#faq:hover{ 
background-position: bottom left; 
} ul#navlist li {
 display: inline;
}
ul#navlist {
 list-style-type: none;
}

cheers
pete