title: How to center the following menu?
body: <p>I've got the following inside a div. I'd like to center the menu elements. Currently they appear like so...</p>
  
  <pre><code> | Home | Blog | About | Contact |
  </code></pre>
  
  <p>I'd like it to center so something like...</p>
  
  <pre><code>                         | Home | Blog | About | Contact |
  </code></pre>
  
  <p>Here's my CSS, what would I need to change?</p>
  
  <pre><code>     ul#menu
    {
  margin:0;
  padding:0;
  list-style-type:none;
  width:auto;
  position:relative;
  display:block;
  height:30px;
  font-size:12px;
  font-weight:bold;
  background:transparent url(images/nav_bg.png) repeat-x top left;
  font-family:Arial, Helvetica, sans-serif;
  border-bottom:1px solid #000000;
  border-top:1px solid #000000;
      }
  
       ul#menu li
        {
  display:block;
  float:left;
  margin:0;
  padding:0;
       }
  
      ul#menu li a
     {
  display:block;
  float:left;
  color:#999999;
  text-decoration:none;
  font-weight:bold;
  padding:8px 20px 0 20px;
       }
  
      ul#menu li a:hover
       {  
  color:#FFFFFF;
  height:22px;
  background:transparent url(images/nav_bg.png) 0px -30px no-repeat;      
      }
  
  
      ul#menu li a.current
     {
  display:inline;
  height:22px;
  background:transparent url(images/nav_bg.png) 0px -30px no-repeat;  
  float:left;
  margin:0;
     }
  </code></pre>