Question

我在表格中有表格元素。父表的宽度为100％，子表的宽度为300px。我希望孩子居中，所以我尝试用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不是。{/ p>

align上的table属性并未引用文字，而是

对齐

此枚举属性指示表必须如何在包含文档内对齐。

根据上面的table文档，align已被弃用，建议您确实使用margin:0 auto;来确定＆＃34; center＆＃34;一个table元素

使用说明

不要使用此属性，因为它已被弃用。应使用CSS设置<table>元素的样式。将margin-left和margin-right设置为自动或将margin设置为0自动，以获得与align属性类似的效果。

Answer 2

table仅适用于内联元素，显然table table { display:inline; }是一个表元素。设置并重试

22:00 - 06:00 is T1
06:00 - 17:00 is T2
17:00 - 22:00 is T3

table元素的作用与align =“center”vs css text-align：center不同;

2 个答案: