24

我有一个非常简单的问题：我需要在一个 TD 元素中居中一个表格。如果我使用 HTML 4，我会这样做：

​<table style="border:solid;width: 100%">
    <tr>
        <td align="center">
            <table style="border:solid; width:50%">
                <tr>
                    <td >I must be in the center</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

但我试图不使用不推荐使用的属性，而是使用 CSS 方式。我已经尝试过了：

<td style="text-align:center">

和这个：

<td style="margin: 0 auto">

表格保留在单元格的左侧。有什么建议么？

4

3 回答 3

34

您的想法是正确的，margin:auto 0;只需取下 0。

工作示例：http: //jsfiddle.net/cxnR8/

<table style="border:solid;width: 100%">
    <tr>
        <td>
            <table style="margin:auto;border:solid; width:50%">
                <tr>
                    <td >I must be in the center</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

但是，更重要的是，您真的需要使用表格和内联样式吗？

于 2012-12-28T21:20:27.417 回答
1

你的第二个建议是正确的。请参阅此工作示例。

HTML：

<table class="outer">
    <tr>
        <td>
            <table class="inner">
                <tr>
                    <td>in the middle</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

CSS：

.outer
{
    width: 100%;
    border: solid 1px red;
}
.inner
{
    width: 25%;
    margin: auto;
    border: solid 1px blue;
}
​
于 2012-12-28T21:25:14.910 回答
1

align=""使用不推荐使用的属性将表格居中。

<table>
    <tr>
        <td>
            <table align="center">
                <tr>
                    <td>in the middle</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​
于 2017-03-06T20:55:12.043 回答