使用CSS水平居中内容

使用CSS水平居中内容,css,Css,我有一个有页脚的网站。页脚是一个简单的灰色背景。我想在页脚中放置一些绝对大小的内容。为了做到这一点,我尝试了以下方法: <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"

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

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

| 
| 
州松树街123号|市12345 | 1-800-555-5555
版权所有公司|保留所有权利
为什么我的800px表格中心不在页脚内


谢谢大家!

文本对齐不适用于表格本身。在桌子上试试
margin:auto

一个非常简单的例子:

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

您需要将第二个嵌套div的宽度设置为800px,以便自动边距正常工作。现在它与包含div的宽度相同,所以边距没有效果。正如其他答案所指出的,你也可以把自动边距放在桌子上

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

margin: 0 auto;

要么这样,要么将样式添加到表中,而不是我在第二句中提到的样式。如果你走这条路,第二个div就不需要了。