この記事は2008年6月25日に書かれたものです。既に内容が古い可能性があります。

vertical-align:文字の配置(インライン)

vertical-alignプロパティは、インライン要素、セル要素内の垂直方向の位置を指定します。

プロパティ
vertical-align

キーワード(下記参照)

baseline
(対象のベースラインを親要素のベースラインに揃える)

top
(対象の上辺を最も高い要素の上辺に揃える)

middle
(対象のベースラインから親要素のフォントサイズの小文字”x”の高さの半分だけ上に揃える)

bottom
(対象の下辺を行中の最も低い要素の下辺に揃える)

super
(対象のベースラインを親要素の上付き文字の位置に揃える-セル要素無効)

sub
(対象のベースラインを親要素の下付き文字の位置に揃える-セル要素無効)

text-top
(対象の上辺を親要素のフォントの上辺に揃える-セル要素無効)

text-bottom
(対象の下辺を親要素のフォントの下辺に揃える-セル要素無効)

対象
インラインレベルとテーブル-セル要素
継承の有無
なし
ポイント
IEで使用の際はレイアウトに注意。Firefox等は厳密。

vertical-alignサンプル

サンプル配置イメージサンプルサンプル配置baseline

サンプル配置イメージサンプルサンプル配置top

サンプル配置イメージサンプルサンプル配置middle

サンプル配置イメージサンプルサンプル配置bottom

サンプル配置イメージサンプルサンプル配置super

サンプル配置イメージサンプルサンプル配置sub

サンプル配置イメージサンプルサンプル配置text-top

サンプル配置イメージサンプルサンプル配置text-bottom

タグ: