使用CSS对齐表中的<td>元素

Question

这听起来可能有点奇怪，但是这样做：

<table id="MyTableID">
     <tr>
         <td align="center">
                <div id="1">
                   Content
               </div>
        </td>
     </tr>
 </table>

将"Content“居中对齐，但是：

<table id="MyTableID">
     <tr>
         <td style="text-align: center;">
                <div id="1">
                   Content
               </div>
        </td>
     </tr>
 </table>

将其左对齐。

我读过很多关于使用margin-left: auto和margin-right: auto的文章，也将样式解压到css文件中。这些对我来说似乎都不管用。

有人知道为什么吗？我做错了什么？我使用的是Firefox 19。

Answer 1

我认为这里的误解是，在使用传统的html对齐方式时，您在父元素中声明了对齐方式。

<td align="center">
    <!-- Centered stuff in here -->
</td>

不应该使用文本对齐来对齐块级元素。此外，在使用块元素时，您通常希望将该样式应用于该特定节点，然后使用边距对齐。

<td>
    <div style="width:100px;margin:0 auto"></div>
</td>

也就是说，在表中抛出块元素从来都不是一个好主意。表格通常保留用于HTML电子邮件和表格数据。大多数现代web产品都是使用CSS构建div/span结构的。