【问题标题】：How to horizontally align css table elements?如何水平对齐css表格元素？
【发布时间】：2018-03-28 14:01:53
【问题描述】：

尝试复制这种设计/结构： 注意在桌子一侧的两个盒子和另一侧的一个大盒子下面！ 我将如何使用表格 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>

有什么想法吗？：

【问题讨论】：

看我的回答！我尽力了！
研究使用弹性设计。它可以用更少的代码完成您需要的工作。
如果你觉得我的回答不错，你能接受吗？
您正在使用过时的属性。 align 和 valign。不要那样做。

标签： html css

【解决方案1】：

Steven 是对的，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

edit thats center 这是水平的，只需更改 neccecery css 或查看here！

【讨论】：

你为什么用粗体字对我们大喊大叫？
我不是。抱歉，我删除了粗体字，但这是为了让它脱颖而出