Căn giữa một Bảng bên trong một TD

Question

Tôi có một vấn đề rất đơn giản: Tôi cần căn giữa một bảng bên trong phần tử TD. Nếu tôi đang sử dụng HTML 4, tôi sẽ làm như sau:

​<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>​ 

Nhưng tôi đang cố gắng không sử dụng thuộc tính không dùng nữa và thực hiện theo cách CSS. Tôi đã cố gắng này:

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

Và đây:

<td style="margin: 0 auto"> 

Và các bảng giữ ở phía bên trái của tế bào. Bất kỳ đề xuất?

Answer 1

Bạn đã có ý tưởng đúng với margin:auto 0; chỉ cất cánh ví dụ 0.

làm việc: 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>​ 

Nhưng, quan trọng hơn, bạn có thực sự cần phải sử dụng bảng và in-line tạo kiểu tóc?

Answer 2

Đề xuất seccond của bạn là chính xác. See this working example.

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

Answer 3

Center bảng bằng cách sử dụng phản align="" thuộc tính.

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