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

vertical-alignプロパティ

 vertical-alignプロパティは、テキストの上下位置を指定するプロパティです。テキストの上付き、下付きと言ったりします。テキストのデフォルト位置を基準にinlineエレメントの垂直方向の配置も指定できます。

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

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

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

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

関連プロパティ

 以下はテキスト配置に関連するプロパティです。

letter-spacing文字間隔
line-heightテキストの行間
overflow-wrap単語がエレメント内に入りきらない場合の設定
tab-sizeタブのサイズ
text-align右寄せ、中央寄せ、左寄せ
text-align-last最後の行の右寄せ、中央寄せ、左寄せ
text-combine-upright縦書きにおける算用数字(アラビア数字)の配置
text-indent最初の行頭の字下げ幅
text-justify両端揃えにおける単語、文字の間隔
text-overflowエレメントからテキストがはみ出る場合の表記
white-spaceホワイトスペース(複数の半角スペース、タブ)や改行の表示方法
word-breakエレメントの領域をはみ出るテキストの折り返し
word-spacing単語と単語の間の空白を調整
word-wrapoverflow-wrapプロパティの別名

構文(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

 vertical-alignの表示例です。文字の上下位置を調整します。-50%で半文字分下がります。