对齐表标题中的文本

看起来 align并不适用于 这个元素，下面是我的 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@example.com" property_name="PrimaryEmail" align="center">admin@example.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，文本对齐失败了。为什么？

190608 次浏览
小开

尝试使用文本对齐样式属性对齐中心。

<th class="not_mapped_style" style="text-align:center">DisplayName</th>
小开
最佳答案

试试:

text-align: center;

您可能已经熟悉了 HTML 对齐属性(从 HTML5开始就已经停止使用了)。属性可以与标记一起使用，例如

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

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

这些属性不再使用，而是使用 CSS 来设置 HTML 元素的对齐方式。

实际上没有 CSS 对齐或 CSS 对齐属性。相反，CSS 具有应用于块级别元素的内联内容的文本对齐和应用于内联级别和表单元格的垂直对齐属性。

小开

尝试使用风格

th {text-align:center}
小开

您的代码可以工作，但是它使用了不推荐的方法。应该使用 CSS text-align属性而不是对齐属性执行此操作。即便如此，肯定是你的浏览器或者其他什么东西影响了它。在 铬合金中尝试这个演示(我必须禁用 norize.css 才能呈现它)。

小开

在 HTML5中，最简单也是最快的使你的 <th>THcontent</th>居中的方法就是像下面这样添加一个 colspan:

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

如果您的表是三列，那么这种方法就可以工作。因此，如果您有一个4列的表，添加一个4的 colspan，等等。

你可以管理位置进一步在 CSS 文件，而你已经把你的 colspan在 HTML，如我所说。

th {
text-align: center; /* Or right or left */
}
小开

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

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

我必须结合使用 width: auto 和 text:

<th style="width:auto;text-align:center">lvl 2 col a</th>
<th style="width:auto;text-align:center">lvl 2 col b</th>
小开

HTML:

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

CSS:

tr, th {
padding: 10px;
text-align: center;
}
小开

如果要将所有表的 th 放在中间:
table th{ text-align: center; }

如果只希望以已确定 id 的表的 th 为中心:
table#tableId th{ text-align: center; }

小开

对于内联 css (你真的不应该这样做) ，你应该这样做:

<th style="text-align: center;">I'm a heading!</th>

上面其他人提供的答案告诉您如何在 css 文件中实现，这是一个更好的做法。使用内联样式会使事物更难阅读和扩展。更不用说，更难调试。(保持关注点分离)。

小开

我不得不把我的第四个文本在一个与 display: flex的 div 为了文本是中间对齐。

<th style="width: 15%;">
<div style="width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center">
Blah blah blah
</div>
</th>

提交答案