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;
}