Html 对齐表格标题中的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13992096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align text in a table header
提问by Michael Z
It seems alignis not working for the thelement. Here is my HTML:
它似乎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="[email protected]" property_name="PrimaryEmail" align="center">[email protected]</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>Text aligning is working just fine for the tdelements but fails for the th. Why?
文本对齐对于td元素工作得很好，但对于th. 为什么？
回答by topcat3
Try:
尝试：
text-align: center;
You may be familiar with the HTML align attribute (which has been discontinued as of HTML 5). The align attribute could be used with tags such as
您可能熟悉 HTML align 属性（从 HTML 5 开始已停止使用）。align 属性可以与标签一起使用，例如
<table>, <td>, and <img>
to specify the alignment of these elements. This attribute allowed you to align elements horizontally. HTML also has/had a valign attribute for aligning elements vertically. This has also been discontinued from HTML5.
指定这些元素的对齐方式。此属性允许您水平对齐元素。HTML 还具有/具有用于垂直对齐元素的 valign 属性。这也已从 HTML5 中止。
These attributes were discontinued in favor of using CSS to set the alignment of HTML elements.
这些属性已停止使用，转而使用 CSS 来设置 HTML 元素的对齐方式。
There isn't actually a CSS align or CSS valign property. Instead, CSS has the text-align which applies to inline content of block-level elements, and vertical-align property which applies to inline level and table cells.
实际上没有 CSS align 或 CSS valign 属性。相反，CSS 具有适用于块级元素的行内内容的 text-align 和适用于行内级和表格单元格的 vertical-align 属性。
回答by vusan
Try using style for th
尝试使用样式
th {text-align:center}
回答by SaidbakR
Try to use text-align in style attribute to align center.
尝试在 style 属性中使用 text-align 来对齐中心。
<th class="not_mapped_style" style="text-align:center">DisplayName</th>
回答by Lewis86
If you want to center the th of all tables:table th{ text-align: center; }
如果要居中所有表的 th：table th{ text-align: center; }
If you only want to center the th of a table with a determined id:table#tableId th{ text-align: center; }
如果您只想将具有确定 ID 的表居中：table#tableId th{ text-align: center; }
回答by Gene
HTML:
HTML：
<tr>
<th>Language</th>
<th>Skill Level</th>
<th> </th>
</tr>
CSS:
CSS：
tr, th {
padding: 10px;
text-align: center;
}
回答by peterManesis
In HTML5, the easiest, and fastest, way to center your <th>THcontent</th>is to add a colspanlike this:
在HTML5 中，最简单、最快速的居中方式<th>THcontent</th>是添加colspan如下代码：
<th colspan="3">Thcontent</th>
This will work if your table is three columns. So if you have a four-column table, add a colspanof 4, etc.
如果您的表是三列，这将起作用。因此，如果您有一个四列表，请添加一个colspan4 等。
You can manage the location furthermore in the CSS file while you have put your colspanin HTML like I said.
您可以在 CSS 文件中进一步管理位置，同时colspan像我说的那样将您的位置放入HTML 中。
th {
text-align: center; /* Or right or left */
}
回答by Joseph Marikle
Your code works, but it uses deprecated methods to do so. You should use the CSS text-alignproperty to do this rather than the align property. Even so, it must be your browser or something else affecting it. Try this demo in Chrome(I had to disable normalize.css to get it to render).
您的代码有效，但它使用不推荐使用的方法来执行此操作。您应该使用 CSStext-align属性而不是 align 属性来执行此操作。即便如此，它一定是您的浏览器或其他影响它的东西。在Chrome 中试试这个演示（我必须禁用 normalize.css 才能呈现它）。
- Source: http://jsfiddle.net/EDSWL/
- Demo: http://jsfiddle.net/EDSWL/show
回答by Flyout91
For me none of the above worked. I think it is because I have two levels of header and a fixed width on level 1. So I couldn't align the text inside the corresponding columns on level 2.
对我来说，以上都没有奏效。我认为这是因为我在级别 1 上有两级标题和固定宽度。所以我无法在级别 2 上对齐相应列内的文本。
+---------------------------+
| lvl 1 |
+---------------------------+
| lvl 2 col a | lvl 2 col b |
+---------------------------+
I had to use the combination of width:auto and text:align-center :
我不得不使用 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>
