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

vertical-alignにはテーブルのTH、TDへの指定、インライン要素の行揃えの指定、インライン要素の次に続く要素の指定があります。
子要素を中央そろえにしようとして、単純にテーブルのTH、TD以外のブロック要素などに指定してもできません。

テーブルのTH、TDへの指定

初期値(標準)
上揃え
中央揃え
下揃え

インライン要素の行揃えの指定

あいうえおかきくけこ

インライン要素の次に続く要素の指定

[参考記事] フォント(文字)に関する書体用語

対応ブラウザ

  • IE4
  • IE5
  • IE6
  • IE7
  • IEMac
  • Netscape6
  • Netscape7
  • Firefox1
  • Firefox2
  • Firefox3
  • Opera6
  • Opera7
  • Opera8
  • Opera9
  • Safari1
  • Safari2
  • Safari3

仕様

なし

内容
baselineベースラインを揃える
[初期値]
top上端揃えにする
middle中央揃えにする
bottom下端揃えにする
text-topテキストの上端に揃える
text-bottomテキストの下端に揃える
super上付き文字として揃える
sub下付き文字として揃える
数値数値にpxなどの単位をつけて指定する
ベースラインが揃った状態を0として、指定した数値分だけ上方向へ移動する
下方向へ移動させる場合には負の数値を指定する
%値line-heightプロパティの値に対する割合を%値で指定する
ベースラインが揃った状態を0として、指定した数値分だけ上方向へ移動する
下方向へ移動させる場合には負の数値を指定する

スポンサーリンク

関連記事

スポンサーリンク

heightの%値指定が要素の幅に対する%値になる

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る