【CSS】table のセル内容を上下(縦)方向に中央揃えにする

スポンサーリンク

CSS で table(テーブル)のセル内容を上下(縦)方向中央揃えにする場合は、 vertical-align プロパティを使用します。

vertical-align プロパティは、 インライン要素や、セル要素(th、td)に対して適用できます。

vertical-align プロパティの値として使用頻度が高いのは、 top、middle、bottom です。top が上、middle が中央、bottom が下を意味します。

使用例


td, th {
    vertical-align: middle;  /* 中央揃え */
}

中央揃えのサンプル

下のテーブルは、「vertical-align: middle;」を指定して、 上下(縦)方向に中央揃えにしています。

ヘッダヘッダ
データデータ
データデータ

table, td, th {
    border: 1px solid black;
}
td, th {
    height: 50px;
    vertical-align: middle;
}

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト