对齐表格标题中的文本

Question

似乎 align 不适用于第 th 元素。这是我的 HTML：

 <div style="width: 100%; height: 175px; overflow: auto;">
  <table class="grid" id="table">
    <thead>
      <tr>
        <th class="not_mapped_style" style="display: none;" align="center">id</th>
        <th class="not_mapped_style" align="center">DisplayName</th>
        <th align="center">PrimaryEmail</th>
        <th align="center">Age</th>
        <th align="center">Phone</th>
      </tr>
    </thead>
    <caption>Contacts</caption>
    <tbody>
      <tr>
        <td style="display: none;" property_value="0" property_name="id" align="center">0</td>
        <td property_value="rpcuser" property_name="DisplayName" align="center">rpcuser</td>
        <td property_value="[e-mail]" property_name="PrimaryEmail" align="center">[e-mail]</td>
        <td property_value="69" property_name="Age" align="center">69</td>
        <td property_value="[phone]" property_name="Hand_Phone" align="center">+18007</td>
      </tr>
    </tbody>
  </table>
</div>

文本对齐对于 td 元素工作得很好，但对于 th 失败。为什么？

原文由 Michael Z 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试：

 text-align: center;

您可能熟悉 HTML align 属性（自 HTML 5 起已停用）。 align 属性可以与标签一起使用，例如

<table>, <td>, and <img>

指定这些元素的对齐方式。此属性允许您水平对齐元素。 HTML 还具有/具有用于垂直对齐元素的 valign 属性。这也已从 HTML5 中终止。

这些属性已停止使用，取而代之的是使用 CSS 来设置 HTML 元素的对齐方式。

实际上没有 CSS align 或 CSS valign 属性。相反，CSS 具有适用于块级元素的内联内容的 text-align 和适用于内联级和表格单元格的 vertical-align 属性。

原文由 topcat3 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试在 style 属性中使用 text-align 来居中对齐。

 <th class="not_mapped_style" style="text-align:center">DisplayName</th>

原文由 SaidbakR 发布，翻译遵循 CC BY-SA 3.0 许可协议