title: Center a ul within a div (within a div) which itself is centered on the page
body: <p>I'm attempting to center my CSS menu but I'm having issues, basically I'd like it to be in the center of my <code>content</code> div. Currently it's displaying from the left. Does anyone know what I would have to add to achieve what I want? Below is my code.</p>
  
  <p>My index.html</p>
  
  <pre><code>&lt;head&gt;
  
  &lt;meta content="en-ie" http-equiv="Content-Language" /&gt;
  
  &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
  
   &lt;title&gt;Title&lt;/title&gt;
  
  &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="contain"&gt;
  
      &lt;div id="header"&gt;
  
          &lt;p&gt;&lt;img alt="" height="67" src="header.png" width="431" /&gt;&lt;br /&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  
  &lt;div id="tabs"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="http://www.free-css.com/"&gt;&lt;span&gt;Item 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.free-css.com/"&gt;&lt;span&gt;Item 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.free-css.com/"&gt;&lt;span&gt;Item 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="content"&gt;
  
  
  &lt;/div&gt;
  
  &lt;div id="footer" style="width: 93px; height: 12px"&gt;
  
  &lt;/div&gt;
  
   &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>My style.css</p>
  
  <pre><code>body{
  background-color: #292929;
  
  }
    p{
  color: white;
  font-family:"Times New Roman", Times, serif;
  font-size: 14px;
      }
  
     h2{
  color: white;
  font-family:"Times New Roman", Times, serif;
  font-size: 18px;
      }
  
      a:link {
      COLOR: #00CCFF;
      }
     a:visited {
       COLOR: #00CCFF;
     }
     a:hover {
      COLOR: #00CCFF;
       }
    a:active {
     COLOR: #00CCFF;
      }
  
     /* DIV's */
  
     #contain {
  background-color:#444343;
  width: 700px;
  margin-left: auto ;
  margin-right: auto ;
  opacity: .5;
      }
      #header {
  width: 700px;
  margin-left: auto ;
  margin-right: auto ;
      }
  
     #content { 
  float: left;
  width: 700px;
  margin-left: auto ;
  margin-right: auto ;
  
      }
  
      #footer {
  color: white;
  font-size:10px;
  width: 11px;
  margin-left: auto ;
  margin-right: auto ;
  
  }
  
     #tabs {
  float:left;
  width:100%;
  font-size:93%;
  border-bottom:1px solid #292929;
  line-height:normal;
  }
  
     #tabs ul {
  margin:0;
  padding:10px 10px 0 50px;
  list-style:none;
  text-align: center;
  }
  
      #tabs li {
  display:inline;
  margin:0;
  padding:0;
  }
  
     #tabs a {
  float:left;
  background:url("tableft.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
  }
  
     #tabs a span {
  float:left;
  display:block;
  background:url("tabright.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#FFF;
  }
  
     /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
  
    /* End IE5-Mac hack */
    #tabs a:hover span {
  color:#FFF;
  }
  
     #tabs a:hover {
  background-position:0% -42px;
  }
  
     #tabs a:hover span {
  background-position:100% -42px;
  }
  </code></pre>