alignment表格标题中的文字

看起来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> 

文本alignment对于td元素来说工作得很好,但是对于这些元素却是失败的。 为什么?

尝试:

 text-align: center; 

您可能熟悉HTMLalignment属性(自HTML 5起已停止使用)。 align属性可以和标签一起使用,比如

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

指定这些元素的alignment方式。 这个属性允许你水平alignment元素。 HTML也具有垂直alignment元素的valign属性。 这也已经从HTML5中断了。

这些属性不再支持使用CSS设置HTML元素的alignment方式。

实际上没有一个CSSalignment或CSS valign属性。 相反,CSS具有适用于块级元素的内联内容的文本alignment,以及适用于内联级别和表格单元的vertical-align属性。

尝试使用风格的th

 th {text-align:center} 

尝试使用样式属性中的文本alignment来alignment中心。

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

你的代码工作,但它使用不赞成的方法来做到这一点。 你应该使用CSS text-align属性来做到这一点,而不是alignment属性。 即使如此,它一定是你的浏览器或其他影响它的东西。 在Chrome中尝试这个演示(我不得不禁用normalize.css来渲染)。

  • 来源: http : //jsfiddle.net/EDSWL/
  • 演示: http : //jsfiddle.net/EDSWL/show

在HTML5中 ,最简单和最快速的方式来居中您的<th>THcontent</th>是添加一个colspan像这样:

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

这将工作,如果你的表是三列。 所以,如果你有一个四列表,添加一个4等等。

你可以在CSS文件中进行位置pipe理,就像我说的那样把你的colspan放在HTML中。

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

对我而言,以上都没有奏效。 我认为这是因为我有两个级别的标题和1级的固定宽度。所以我无法alignment2级相应列中的文本。

 +---------------------------+ | 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>