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

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

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

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

vertical-align: middle 使用例


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

中央揃えのサンプル

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

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

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

HTML・CSS入門