title: Horizontal Table needed centering
body: <p>Bit new at CSS and been looking around at various sites and bits of code trying to get a centered drop down menu which I managed to get :).</p>
  
  <p>However as soon as I added some images to make up the heading the menu shifted off to the left and I have not been able to budge it ever since, any help? Code is below.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  &lt;!--
  body {
      background-image: url();
      background-color: #0099FF;
  }
  .style1 {color: #FFCC00}
  .style2 {color: #FF9900}
  .style3 {
      color: #FFCC00;
      font-weight: bold;
      font-size: 12px;
  }
  .style4 {
      color: #000099;
      font-weight: bold;
  }
  .style5 {color: #000099; font-weight: bold; font-size: 12px; }
  .style6 {color: #000099}
          * { padding: 0; margin: 0; }
          body { padding: 5px; }
          ul { list-style: none; margin: auto}
          ul li { float: left; padding-right: 0px; position: relative; }
          ul a { display: table-cell; vertical-align: middle; width: 100px; height: 50px; text-align: center; background-color: #0099EE; color: #000000; text-decoration: none; border: 1px solid #000000;}
          ul a:hover { background-color: #0066FF; }
          li &gt; ul { display: none; position: absolute; left: 0; top: 100%; }
          li:hover &gt; ul { display: inline; }
          li &gt; ul li { padding: 0; padding-top: 0px; }
          #menu-outer {
      height: 84px;
      background: url(images/bar-bg.jpg) repeat-x;
  }
  
  .table {
      display: table;
      margin: 0 auto;
  }
  
  
  ul#horizontal-list {
      min-width: 696px;
      list-style: none;
      padding-top: 20px;
      }
      ul#horizontal-list li {
          display:inline
      }
  
  
  --&gt;
  &lt;/style&gt;&lt;/head&gt;
  
  &lt;body&gt;  
  
    &lt;div id="menu-outer"&gt;&lt;/div&gt;
  &lt;div class="table"&gt;&lt;/div&gt;
  &lt;div align="center"&gt;&lt;img src="logo_with_words_3.jpg" width="172" height="145"&gt;&lt;img src="heading.gif" width="557" height="69"&gt;&lt;img src="logo_with_words_3.jpg" width="172" height="145"&gt;
  &lt;/div&gt;
  &lt;ul id="horizontal-list"&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Guest Comments&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Accommodation&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Rooms&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Bedrooms&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;St Joseph's Annexe&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Visiting St Katharine's&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Retreats&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;B&amp;B&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Conferences&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Catering&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Find Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Walled Garden&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Sue Ryder Legacy&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sue Ryder&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Prayer Fellowship&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;LRWMT&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
  &lt;/ul&gt;
  
  &lt;/body&gt;
  </code></pre>