Центрировать таблицу внутри TD

У меня очень простая проблема: мне нужно центрировать таблицу внутри элемента 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">

И таблицы хранятся в левой части ячейки. Любые предложения?

Ответ 1

У вас была правильная идея с 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>

Но, что еще более важно, вам действительно нужно использовать таблицы и встроенный стиль?

Ответ 2

Ваше предложение по второму предложению верное. См. этот рабочий пример.

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

Ответ 3

Центрируйте таблицу, используя устаревший атрибут align="".

<table>
    <tr>
        <td>
            <table align="center">
                <tr>
                    <td>in the middle</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>