Fatal编程技术网
  • html/
  • Html 如何水平对齐css表格元素？

Html 如何水平对齐css表格元素？

html css

Html 如何水平对齐css表格元素？,html,css,Html,Css,试图复制这种设计/结构： 注意桌子一侧的两个盒子和另一侧的一个大盒子下面 我如何使用表格css实现这一点？这是我当前的代码，垂直堆叠： <body> <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable"> <tr> <td align="center" valign="top"> <tab

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


这就是我身体的内容。
这就是我身体的内容。
这就是我身体的内容。
有什么想法吗？：

史蒂文是对的，在：

使用CSS将表格居中的“正确”方法。如果左右边距相等，则一致的浏览器应该将表格居中。实现这一点的最简单方法是将左右边距设置为“自动”。因此，可以在样式表中编写：

但是在这个答案的开头提到的那篇文章提供了所有其他方法来居中放置一张桌子

优雅的css跨浏览器解决方案： 这在MSIE 6（怪癖和标准）、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>

div.centered
{
文本对齐：居中；
}
分区居中表
{
保证金：0自动；
文本对齐：左对齐；
}
…
看到这个了吗
编辑该中心这是水平的，只需更改必要的css或查看

看看我的答案！我尽力了！研究使用flex设计。它可以用更少的代码做你需要的事情。如果你认为它很好，你能接受我的答案吗？你使用的是过时的属性<代码>对齐和
有效
。别那么做。你为什么用粗体字对我们大喊大叫？我不是。对不起，我会删除粗体的，但这是为了让它脱颖而出 
  div.centered 
{
    text-align: center;
}

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


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