对齐表头中的文本

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="admin@domain.com" property_name="PrimaryEmail" align="center">admin@domain.com</td>
        <td property_value="69" property_name="Age" align="center">69</td>
        <td property_value="+722616807" property_name="Hand_Phone" align="center">+18007</td>
      </tr>
    </tbody>
  </table>
</div>

文本对齐对于td元素工作得很好,但是失败了th.为什么？

Answer 1

尝试:

text-align: center;

您可能熟悉HTML align属性(自HTML 5起已停止使用).align属性可以与标签一起使用,例如

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

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

这些属性已停止使用CSS来设置HTML元素的对齐方式.

实际上没有CSS对齐或CSS valign属性.相反,CSS具有适用于块级元素的内联内容的text-align,以及适用于内联级别和表格单元格的vertical-align属性.

Answer 2

尝试使用样式

th {text-align:center}

Answer 3

尝试在style属性中使用text-align来对齐中心.

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