vertical-alignNN 6 IE 4 CSS 1

継承 : なし

この属性には 2 組の値があり、適用するインライン要素の文字に異なる設定を行います。この設定で重要なのは、インライン要素がコンテンツを保持する独自のラインボックスを持つことです。topbottom の 2 つの値はラインボックスでのテキストの表示方法に影響します。この 2 つを設定するとボックスのその設定に対応して上または下にテキストフラッシュが表示されます。

この属性の適用はテキストのインラインの幅だけではありません。イメージとテーブルにもこの属性が使用できます。vertical-align のその他すべての設定は、要素の領域全体が親要素のテキストコンテンツに対する縦方向の配置方法に影響します。既定値の baseline にすると、ラインボックスのテキスト (または img などの要素の一番下) と親テキストの両方のベースラインが水平になるようにラインボックスを配置します。このように em 要素は独自のラインボックス要素になることができますが、p 要素を持つので同じベースライン上にあるように見えます。その他の属性の定数値 (およびパーセント値または長さ) は要素のラインボックスが親のラインを元に設定されるかどうかを決定します。正のパーセント値または長さの値を指定すると、要素はベースラインから指定した距離だけ上に配置されます。負の値を指定すると、要素はベースラインの下に配置されます。パーセント値は、ラインの高さを基準に計算します。

 
CSS 構文
 
vertical-align: vertAlignType | length | percentage
 

次の 2 つの定数値が要素自体のテキストの整列に適用されます : bottom | top

周辺の親要素のテキストラインに対して、baselinemiddlesubsupertext-bottom、および text-top の 6 つの定数値が要素のラインボックスの配置に適用されます。baseline に設定すると要素のベースラインと親要素ラインを揃えます。middle に設定すると要素の縦方向の中心点をベースラインに親要素のフォントの x-height の半分を足したものに揃えます。subsuper に設定すると、要素の下付き文字の位置と上付き文字の位置を変えますが、それ自体では真の下付き文字や上付き文字を作成しません。そのため、この属性ではフォントサイズは調節されません。text-bottom に設定すると、要素の一番下を親要素テキストのフォントラインの一番下に揃えます。text-top に設定すると同様に要素と親の一番上を揃えます。

 
既定値

baseline

 
 
span.sup {vertical-align: super; text-size: smaller}
 
適用先

インライン要素のみ

 
オブジェクト参照
 
[window.]document.getElementById("elementID").style.verticalAlign