请参阅此post

Question

尝试复制此类设计/结构： 注意在桌子一侧的两个方框下方和另一侧的大方框下方！ 我如何使用表css实现这一目标？这是我当前的代码，它是垂直堆叠的：

<body>

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
    <td align="center" valign="top">
        <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
            <tr>
                <td align="center" valign="top">
                    <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailHeader">
                        <tr>
                            <td align="center" valign="top">
                                This is where my body content goes.
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="center" valign="top">
                    <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailBody">
                        <tr>
                            <td align="center" valign="top">
                                This is where my body content goes.
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="center" valign="top">
                    <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailFooter">
                        <tr>
                            <td align="center" valign="top">
                                This is where my body content goes.
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

</body>

任何想法？：

Answer 1

史蒂文是对的，在theory：

使用CSS使表居中的“正确”方法。如果左边距和右边距相等，则符合标准的浏览器应该居中。实现此目的的最简单方法是将左右边距设置为“自动”。因此，可以在样式表中写入：

  table
 { 
    margin-left: auto;
    margin-right: auto;
 }

但是，在这个答案的开头提到的文章为你提供了一个集中表格的其他方法。

优雅的css跨浏览器解决方案：这适用于MSIE 6（Quirks and Standards），Mozilla，Opera甚至Netscape 4.x，无需设置任何明确的宽度：

  div.centered 
{
    text-align: center;
}

   div.centered table 
 {
     margin: 0 auto; 
     text-align: left;
 }


   <div class="centered">
    <table>
    …
    </table>
 </div>

请参阅此post

编辑那个中心，这是水平的，只需更改neccecery css或查看here！

如何水平对齐css表元素？

1 个答案:

请参阅此post