備忘録的プログラミングリファレンス

vertical-alignプロパティ

 vertical-alignプロパティは、テキストの上下位置の設定プロパティです。テキストの表示位置を基準にinlineエレメントの垂直方向の配置を設定できます。

 基準より上方向がプラス方向、基準より下方向がマイナス方向です。数値が大きくなれば上に表示されます。小さいほど下に表示されます。

 vertical-alignプロパティはエレメント内でのテキストの表示位置の定義です。エレメント自体の配置を変更したい場合は、block要素にして、positionプロパティと、topbottomleftrightプロパティを組み合わせた方がよいでしょう。

テキストを初期値から10px上に配置
vertical-align: 10px;

 水平方向の配置を設定するには、text-alignプロパティを使います。

構文(Syntax)

CSS

vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom;

DOM(JavaScript)

値の取得
String=object.style.verticalAlign;
値の設定
object.style.verticalAlign="baseline | length | sub | super | top | text-top | middle | bottom | text-bottom";

Values

Value摘要
baseline初期値(default value)
length数値で設定、デフォルト位置を基準に、プラスで上方向、マイナスで下方向。CSS長さの単位を参照のこと
sub親エレメントの添字(subscript)位置
super親エレメントの上付き(superscript)位置
top最も高い位置にあるエレメントの上部
text-top親エレメントのフォントの上部
middle親エレメントの中心位置より下に
bottom親エレメントの下部を基準に
text-bottom親エレメントのフォントの下部
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)baseline
継承(Inherited)no
変化(Animatable)yes

Example