71

th要素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@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要素の配置を設定できるようになりました。

実際には、CSSalignまたはCSSValignプロパティはありません。代わりに、CSSには、ブロックレベルの要素のインラインコンテンツに適用されるtext-alignと、インラインレベルおよびテーブルセルに適用されるvertical-alignプロパティがあります。

于 2012-12-21T14:45:19.703 に答える
21

style属性でtext-alignを使用して、中央を揃えてみてください。

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

thのスタイルを使用してみてください

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

HTML5では、中央に配置する最も簡単で最速の方法は、次のよう<th>THcontent</th>に追加することです。colspan

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

これは、テーブルが3列の場合に機能します。したがって、4列のテーブルがある場合は、4を追加しますcolspan。

私が言ったようにあなたがあなたcolspanをHTMLに入れている間、あなたはCSSファイルでさらに場所を管理することができます。

th { 
    text-align: center; /* Or right or left */
}
于 2016-01-13T17:12:09.840 に答える
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 に答える
0

コードは機能しますが、非推奨のメソッドを使用して機能します。text-alignこれを行うには、alignプロパティではなく、CSSプロパティを使用する必要があります。それでも、それはあなたのブラウザかそれに影響を与える何か他のものでなければなりません。Chromeでこのデモを試してください（レンダリングするには、normalize.cssを無効にする必要がありました）。

于 2012-12-21T14:45:58.080 に答える
0

私にとって、上記のどれもうまくいきませんでした。レベル1に2つのレベルのヘッダーと固定幅があるためだと思います。そのため、レベル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 に答える