HTMLテーブル行のテキストを中央揃えにするにはどうすればよいですか？

222

HTML <table>を使用していて、テキストを<td>各セルの中央に揃えたいのですが。

テキストを水平および垂直に中央揃えするにはどうすればよいですか？

html css

323

CSSとインラインstyle属性の例を次に示します。

td 
{
    height: 50px; 
    width: 50px;
}

#cssTable td 
{
    text-align: center; 
    vertical-align: middle;
}

<table border="1">
    <tr>
        <td style="text-align: center; vertical-align: middle;">Text</td>
        <td style="text-align: center; vertical-align: middle;">Text</td>
    </tr>
</table>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

スニペットを展開

http://jsfiddle.net/j2h3xo9k/

編集：このvalign属性はHTML5では推奨されておらず、使用しないでください。

— デビッドラバージ
ソース

1

要素にvertical-align:middle適用することを想定していませんtrか？

— posfan12

53

td要素のテキストを中央揃えにするCSS は

td {
  text-align: center;
  vertical-align: middle;
}

— カーステン
ソース

29

これをCSSファイルに入れてみてください。

td {
    text-align: center;
    vertical-align: middle;
}

— ボリス
ソース

25

長いインラインの例：

<td style='text-align:center;vertical-align:middle'></td>

省略形のcssの例：

td{
 text-align:center;
 vertical-align:middle;
}

— ヘイデン・スリング
ソース

5

<td align="center" valign="center">textgoeshere</td>

電子メールのフォーマットに最も一般的に使用されている古い機能であるテーブルを使用しているため、これが唯一の正解です。したがって、最善の策は、スタイルだけでなく、インラインスタイルと既知のテーブルタグを使用することです。

— レミ
ソース

5

valignHTML5では非推奨です。使用しないでください。電子メールのフォーマットについては、styleタグまたはインラインstyle属性が最適なソリューションです。

— Sean the Bean

1

セレクター>子：

.text-center-row>th,
.text-center-row>td {
  text-align: center;
}

<table border="1" width='500px'>
  <tr class="text-center-row">
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
  <tr class="text-center-row">
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

スニペットを展開

— フェルナンド
ソース

-1

<td align="center"valign="center">textgoeshere</td>

valignの詳細

— バラスワミーヴァデマン
ソース

12

valign属性はHTML5ではサポートされていません。代わりにCSSを使用してください。

— T30