Horizontally Centering Content with CSS

I have a website that has a footer. The footer is a simple gray background. I want to center some absolutely sized content in that footer. In an effort to do this, I tried the following:

<div style="background-color:gray; font-size:10pt; width:100%;">
  <div style="margin-left:auto; margin-right:auto; text-align:center;">
    <table border="0" cellpadding="0" cellspacing="0" style="width:800px; padding:8px 0px; text-align:center;">
      <tr>
        <td><img alt='' height="75" width="75" src="/images/img1.png" /></td>
        <td><img alt='' height="75" width="75" src="/images/img2.png" /></td>
        <td style="text-align:center; color:White;"><table border="0" cellpadding="0" cellspacing="0" style="text-align:center; width:100%;">
          <tr><td>
            <a href='index.html'>HOME</a> | 
            <a href='about.html'>ABOUT</a&开发者_C百科gt; | 
            <a href='contact.html'>CONTACT US</a>
          </td></tr>
          <tr><td>123 Pine Street | City, State 12345 | 1-800-555-5555</td></tr>
          <tr><td style="font-size:8pt;">Copyright Company, Inc. | All Rights Reserved</td></tr>
      </table></td>
      <td><img alt='' height="75" width="75" src="/images/img3.png" /></td>
      <td><img alt='' height="75" width="75" src="/images/img4.png" /></td>
    </tr>
</table>
</div></div>

Why won't my 800px table center within the footer?

Thank you!

You need to set the width of the second nested div to 800px for the auto margin to work. Right now it's the same width as the containing div so the margin has no effect. You can also put auto margins on the table as the other answers point out.

text-align doesn't apply to the table itself. Try margin: auto on the table.

A really simple example:

<table style="background: #0f0; width: 800px; margin: auto"><tr><td>content</td></tr></table>

remove the div around the table and add the following style to the table:

margin: 0 auto;