<center> 标签与 text-align 显示不同答案

【问题标题】：<center> tag displays differently vs text-align<center> 标签与 text-align 显示不同
【发布时间】：2014-12-17 09:06:43
【问题描述】：

我刚刚发现 <center> 在 HTML5 中已过时，但在带有 <!DOCTYPE html> 的 IE9 中可以正常工作：

http://www.w3.org/TR/html5/obsolete.html#obsolete

替代方法是使用 CSS 文本对齐，但我得到的结果相互矛盾：

<body>
  <table style="text-align:center">
    <tr>
      <th>Column</th>
    </tr>
    <tr>
      <td>Data</td>
    </tr>
  </table>
  <p style="text-align:center">Text</p>
</body>

关于如何将table 内容和p 内容在页面中居中的任何建议？（反正我看不出<center> 有什么不好）。

【问题讨论】：

要使表格居中，您需要将其放在另一个元素中并添加style="text-align:center;" 或给它一个固定宽度并将style="margin:0 auto;" 应用于表格元素
标签是块元素，因此将匹配包含元素的宽度，
是一个奇怪的元素，因为它的作用类似于块元素，但始终是其内容的宽度，除非指定宽度see this article on css-tricks

问题是什么？如果您有一些使用 <center> 的代码并且您想将其更改为使用 CSS，请说并显示您的代码。（这听起来像是一个毫无意义的练习，但至少这是一个可以回答的问题。）<center> 的效果取决于它的内容（也许还有浏览器模式）。

标签： css html obsolete

【解决方案1】：

我刚刚发现它在 HTML5 中已经过时（...）我看不出（它）有什么不好的地方

如果它不在规范中，或者被标记为过时，那么如何解释它以及是否支持它越来越取决于供应商。

截至 2014 年 10 月 28 日，center 出现在

以下列表中的元素已完全过时，作者不得使用

您现在可能正在使用 center 并且它“有效”，但在您的浏览器的下一个版本中，所有支持可能会被丢弃，从而使您的页面无法按预期呈现。

text-align:center 将以完全相同的方式将您的文本居中。但是，浏览器对center 元素应用的任何其他样式（每个都有一组默认的CSS 样式，通常从w3c recommendation 派生）将不存在。

您注意到的冲突结果不是由于使用center 和text-align 而导致的，而是因为文本在不同宽度的元素内对齐。如果您将表格的宽度设置为100%，则对齐方式将相似。

【讨论】：

HTML5 详细描述了center 的含义（实际上，比任何以前的规范都更详细），因此吓唬人们放弃支持是不合理的。供应商取消支持会花费时间和金钱，而且会导致*数以百万计的页面停止工作，那么他们为什么要这样做呢？
如果你有一个链接/引用会很棒 - 它可能很容易解释出现在 Elements in the following list are entirely obsolete, and must not be used by authors 下的 center 以这种方式：S