垂直表示位置 (Line height calculations)

 
ビジュアル詳細
ホーム > CSS2 Note > 垂直表示位置
C1- ie4- N4-

説明

vertical-align: align; C1- ie4- N4-
値:  baseline | sub | super | top | text-top | middle | bottom | text-bottom | <%値> | <長さ> | inherit
初期値:baseline適用要素:インライン要素とテーブルセル要素(th、td要素)継承:しない%値:line-heightプロパティを参照メディア:ビジュアル
このプロパティは、行ボックス内における、インラインボックスの垂直方向の位置を指定します。この値は、参照できる値がある場合のみに意味を持ちます。

vertical-alignに関する考察 * 誤り
* 誤り 2006/08/23に行ったこの考察は根本的に間違っています。正式なサンプルは下記に在りますので、そちらを参考にして下さい。
 

使用例

<img src="cat-naked.jpg" alt="cat" width="60" height="60">
<em style="vertical-align:top">top</em>
<em style="vertical-align:middle">middle</em>
<em style="vertical-align:bottom">bottom</em>
 

垂直表示位置の値

baselineC1- ie4- N4- インラインボックスと親ボックスのベースラインを揃えます。ボックスにベースラインが存在しない場合は、そのボックスの下辺を親ボックスのベースラインに揃えます。初期値。
middleC1- ie4- N4- インラインボックスの中心線を、親ボックスのベースラインから、x-heightの半分だけ上の線に揃えます。
subC1- ie4- N6- インラインボックスのベースラインを、親ボックスの下付き文字として適切な位置まで下げます。フォントに影響はしません。
superC1- ie4- N6- インラインボックスのベースラインを、親ボックスの上つき文字として適切な位置まで上げます。フォントに影響はしません。
text-topC1- ie4- N4- インラインボックスの上辺を、親要素のフォント上辺に合わせます。
text-bottomC1- ie4- N4- インラインボックスの下辺を、親要素のフォント下辺に合わせます。
topC1- ie4- N4- ボックスの上辺を、行ボックスの上辺に揃えます。
bottomC1- ie4- N4- ボックスの下辺を、行ボックスの下辺に揃えます。
%値C1- ie6- N6- インラインボックスのベースラインを、line-heightの値に掛け合わせたパーセント分だけ上げる(正の値)か下げます(負の値)。0%という値は、親ボックスのベースラインに揃えられます。
長さC2- ie6- N6- インラインボックスのベースラインを、指定した長さだけ上げる(正の値)か下げます(負の値)。0という値は、親ボックスのベースラインに揃えられます。長さの相対単位は自身のフォントサイズを参照します。

テーブルセル(th、td要素)における垂直表示位置の値

baselineC1- ie4- N4- セルのベースラインを、行全体内の中で最も高い文字のベースラインと揃えます。
topC1- ie4- N4- セルボックスの上線を、行全体の上線と揃えます。
bottomC1- ie4- N4- セルボックスの下線を、行全体の下線と揃えます。
middleC1- ie4- N4- セルボックスの中心線を、行全体の中心線と揃えます。
sub、super、
text-top、
text-bottom
これらの指定は無効となり、ベースラインで揃えられます。
 
 
関連項目: width | min-width | max-width | height | min-height | max-height | line-height | vertical-align
トップページ CSS2 Note ページトップ
 2005/09/21発行 2009/09/01更新