Question

我有一个有页脚的网站。页脚是一个简单的灰色背景。我想在页脚中放置一些绝对大小的内容。为了做到这一点，我尝试了以下方法：

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

为什么我的800px表格不在页脚中心？

谢谢！

Answer 1

您需要将第二个嵌套div的宽度设置为800px才能使自动边距生效。现在它与包含div的宽度相同，因此边距没有影响。您还可以将其他答案指出的自动边距放在桌面上。

Answer 2

text-align不适用于表格本身。在表格中尝试margin: auto。

一个非常简单的例子：

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

Answer 3

删除表格周围的div并将以下样式添加到表格中：

margin: 0 auto;

使用CSS水平居中内容

3 个答案: