html - table 元素的行为与 align ="center"vs css text-align : center; 不同

Question

我在表格中有表格元素。父表的宽度为 100%，子表的宽度为 300px。我希望 child 居中，所以我尝试使用 css 将其设置为 text-align: center;。 ( https://jsfiddle.net/wrzo7LLb/1/ )

<table class="body">
<tr>
  <td class="align center"> <!-- CSS text-align: center; -->
    <table class="wrapper">
     <tr>
       <td>
         some text
       </td>
     </tr>
    </table>
  </td>
</tr>
</table>

但这行不通。然后我用 align="center"尝试了一下，确实有效。 ( https://jsfiddle.net/wrzo7LLb/ )

<table class="body">
<tr>
  <td align="center"> <!-- align="center" -->
    <table class="wrapper">
     <tr>
       <td>
         some text
       </td>
     </tr>
    </table>
  </td>
</tr>
</table>

有人可以向我解释为什么 align="center" 有效，但 text-align: center; 无效吗？

我知道我可以设置 margin: 0 auto;，但这并不能解释为什么 align="center" 起作用而另一个不起作用.

Answer 1

从语义(和技术)上讲，text-align应该只用于 align inline level elements , 其中一个 table 不是。

align table 上的属性(property)不引用文本而是引用

align

This enumerated attribute indicates how the table must be aligned inside the containing document.

---

根据 table上面的文档，align已被弃用，建议您确实使用 margin:0 auto; “居中”table元素

Usage Note

Do not use this attribute, as it has been deprecated. The <table> element should be styled using CSS. Set margin-left and margin-right to auto or margin to 0 auto to achieve an effect that is similar to the align attribute.