表格元素的行为与 align= "center" 与 CSS 文本对齐：居中;

Question

我在表格中有表格元素。父表的宽度为 100%，子表的宽度为 300px。我希望孩子居中，所以我尝试使用 css 将其设置为文本对齐：中心;。（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只能用于对齐内联级别元素，而table不是。

table上的 align 属性不引用文本，而是引用

對齊

此枚举属性指示表必须在包含文档中对齐的方式。

<小时 />

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

使用说明

请勿使用此属性，因为它已被弃用。<table>元素应使用 CSS 设置样式。 将 margin-left 和 margin-right 设置为自动或margin设置为 0 自动以实现类似于对齐属性的效果。

Answer 2

text-align:center仅适用于内联元素，显然table是一个表元素。设置并重试

table table {
    display:inline;
}