Question

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> | 
            <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!

Answer 1

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>