I have made this menu with an <ul>. I have a problem though I can not get it to center in the page. I have tried using a <div> to center it and tried a table as well.

code:


<style type="text/css">





body {

  font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;

  background-color: #FFF;

}





ul {

  margin: 0;

  padding: 0;

  float: left;

  width: 750px;

  background: #666 url(images/bar.gif) repeat-x;

  list-style: none;

  text-transform: uppercase;

  

}



ul li {

  float: left;

  

}





ul a {

  padding: 0 2em;

  line-height: 2.1em;

  background: url(images/bar.gif) repeat-y left top;

  text-decoration: none;

  color: #000;

  float: left;

  display: block;

 

}





ul a:hover {

  color: #FFF;

  text-decoration: underline;

}







</style>

</head>



<body>

<div align="center">



<ul>

<li class="first"><a href="#">Home</a></li>

<li><a href="#">Something</a></li>

<li><li><a href="#">Something</a></li>

<li><a href="#">Something</a></li>

<li><a href="#">Something</a></li>

<li><a href="#">Something Else</a></li>

</ul>

</div>



</body>

</html>