vertical-align

vertical-alignは、縦方向の位置揃えを指定するスタイルです。

解説

vertical-alignが使用できるのはインライン要素とテーブルセルのみです。
なので、ブロック要素に対してvertical-alignを適用させたい場合はdisplay:table-cell;などを併用する必要があります。

構文

構文は以下になります。

値

vertical-alignには以下の値が指定できます。

太字の値は初期値です。

サンプル

divタグ内のテキストを上下中央揃えにする

.sample01{
  height:100px;
  background-color:#c0c0ff;
  display:table-cell;
  vertical-align:middle;
}

<div class="sample01">
中央揃え
</div>

divはブロック要素なので、display:table-cell;を指定してvertical-alignを有効にしています。

テーブルセル内を下揃えにする

td{
  height:50px;
  vertical-align:bottom;
}

<table>
  <tr><td>いぬ</td><td>きつね</td></tr>
  <tr><td>ねこ</td><td>たぬき</td></tr>
</table>

関連項目

• text-align：横方向の位置揃えを指定する
• vertical-align：縦方向の位置揃えを指定する

Tweet