71

似乎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. 为什么？

4

8 回答 8

98

尝试：

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 属性。

于 2012-12-21T14:45:19.703 回答
21

尝试在样式属性中使用 text-align 来对齐中心。

<th class="not_mapped_style" style="text-align:center">DisplayName</th>
于 2012-12-21T14:43:56.070 回答
21

尝试使用样式

th {text-align:center}
于 2012-12-21T14:45:49.223 回答
4

如果要居中所有表的 th：
table th{ text-align: center; }

如果您只想将具有确定 id 的表的 th 居中：
table#tableId th{ text-align: center; }

于 2018-06-06T10:06:31.657 回答
1

HTML：

<tr>
    <th>Language</th>
    <th>Skill Level</th>
    <th>&nbsp;</th>
</tr>

CSS：

tr, th {
    padding: 10px;
    text-align: center;
}
于 2018-02-27T23:56:39.287 回答
1

在HTML5中，最简单、最快的居中方法<th>THcontent</th>是添加colspan这样的：

<th colspan="3">Thcontent</th>

如果您的表格是三列，这将起作用。因此，如果您有一个四列表，请添加colspan4 等。

您可以在 CSS 文件中进一步管理位置，同时您已将您colspan的 HTML 放入我所说的中。

th { 
    text-align: center; /* Or right or left */
}
于 2016-01-13T17:12:09.840 回答
0

您的代码有效，但它使用不推荐使用的方法来做到这一点。您应该使用 CSStext-align属性而不是 align 属性来执行此操作。即便如此，它必须是您的浏览器或其他影响它的东西。在Chrome中试试这个演示（我必须禁用 normalize.css 才能让它渲染）。

于 2012-12-21T14:45:58.080 回答
0

对我来说，以上都不起作用。我认为这是因为我有两个级别的标题和级别 1 的固定宽度。所以我无法在级别 2 的相应列内对齐文本。

+---------------------------+
|           lvl 1           |
+---------------------------+
| lvl 2 col a | lvl 2 col b |
+---------------------------+

我不得不使用 width:auto 和 text:align-center 的组合：

<th style="width:auto;text-align:center">lvl 2 col a</th>
<th style="width:auto;text-align:center">lvl 2 col b</th>
于 2017-07-31T15:10:56.620 回答