vertical-align/文字・画像の垂直位置

vertical-alignプロパティを使うと文字や画像の垂直位置を変更出来ます。

説明

 vertical-alignプロパティを使うと縦の揃え方を設定出来、ボックス中の文字や画像が配置される垂直位置を変える事が出来ます。

text-align例

構文

 vertical-alignプロパティの構文は以下の通りです。

vertical-align: 配置;

 配置は以下の設定が出来ます。

【配置】
指定 説明
baseline ベースラインに合わせる(デフォルト)
top 行の一番上
middle 行の真ん中
bottom 行の一番下
text-top 親ボックスの一番上
text-bottom 親ボックスの一番下
super 上付き文字
sub 下付き文字
px ベースラインをピクセル数上げる
em ベースラインをem分上げる
% ベースラインを割合で上げる

 baselineは英字でq等が下にはみ出るラインです。デフォルトはベースラインに合わせて表示されます。

 topやbottomは行の高さの一番上と下です。text-topとtext-bottomは親ボックスの一番上と下です。

 middleは真ん中です。

vertical-align比較

テキスト利用例

 vertical-alignのテキストでの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

p {
font-size:200%;
}

.t1 {
font-size:60%;
}

.t2 {
font-size:60%;
vertical-align:top;
}

<p>p<span class="t1">親<span class="t2">top</span></span></p>

 上記を表示すると以下のように最後の60%top指定と記述した部分は行の一番上に揃います。

ptop

 次はtop、text-top、middle、text-bottom、bottomと順に指定しています。又、分かり易さのため背景を付け、line-heightで160%を指定して行を高くしています。

ptoptext-topmiddletext-bottombottom

画像利用例

 縦長の画像の右に短い画像を並べてtop、middle等で右の画像を上寄せや上下中央に表示したいとします。

 クラスt1、t2と順番にtop、text-top、middle、text-bottom、bottomを設定し、<img>タグに適用しています。a.pngが左に表示される長い画像で、b.pngが短い画像です。

.t1 {
vertical-align:top;
}

.t2 {
vertical-align:text-top;
}
※以降bottomまで定義

<img src="a.png" alt="">
<img src="b.png" class="t1" alt="" />
<img src="b.png" class="t2" alt="" />
※以降同じ

 上記を表示すると以下のように最初のtop以外は位置が反映されていないように見えます。

vertical-align説明用図1vertical-align説明用図2vertical-align説明用図2vertical-align説明用図2vertical-align説明用図2vertical-align説明用図2

 この理由はvertical-alignが文字の高さを基準としているのと、text-topやtext-bottomは親ボックスが必要なためです。

 以下のように変えてみます。

p {
font-size: 500%;
}


.t1 {
vertical-align:top;
}

.t2 {
vertical-align:middle;
}

.t3 {
vertical-align:bottom;
}

<p>p
<img src="a.png" alt="">
<img src="b.png" class="t1" alt="" />
<img src="b.png" class="t2" alt="" />
<img src="b.png" class="t3" alt="" />
</p>

 上記は以下のように表示され、pの文字に対してtop、middle、bottomが反映されています。

p vertical-align説明用図1vertical-align説明用図3vertical-align説明用図3vertical-align説明用図3

 必ずしも文字は必要ではなく、例えば左の図にもmiddleを指定します。

.t1 {
vertical-align:middle;
}


.t2 {
vertical-align:middle;
}

<img src="a.png" class="t1" alt="" />
<img src="b.png" class="t2" alt="" />

 上記を表示すると、以下のようになります。

vertical-align説明用図1vertical-align説明用図3

 これは左の長い図と右の小さい図で基準が揃った事で正確に反映されるようになったためです。

 topであれば左の図にもtop、bottomであれば左の図にもbottomを指定する事で同様に反映可能です。

上付き文字と下付き文字

 上付き文字の利用例は以下の通りです。

span {
vertical-align:super;
}

<p>途中で<span>上付き文字</span></p>

 上記は以下のように表示されます。

途中で上付き文字

 superの代わりにsubを指定すると以下のように下付き文字で表示されます。

途中で下付き文字

上からの数字で指定した利用例

 pxで指定した例です。

 vertical-alignのテキストでの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

p {
font-size:200%;
}

.t1 {
font-size:60%;
vertical-align:20px;
}

<p>p<span class="t1">20px</span></p>

 上記を表示すると以下のようにベースラインから上に20pxの所に表示されます。

P20px

 以下はそれぞれ-1.5emと110%と指定した例です。

P-1.5em110%

 このように-や100%以上等も指定可能です。

留意点

 vertical-alignはline-heightをnormal以外で指定していると位置が正確に表示出来ない場合があります。

 これは左の大きなフォントサイズの文字と右の小さなフォントサイズの文字を並べると、line-heightが上下の幅を同じにするよう小さな文字を上下中央に表示するためです。

vertical-alignへのline-height影響

 <p>タグでline-height:160%等指定している場合は、以下のようにして回避も出来ます。

p {
line-height:160%;
font-size:200%;
}

.t1 {
font-size:60%;
}

.t2 {
font-size:60%;
line-height: normal;
vertical-align:top;
}

<p>p<span class="t1">親<span class="t2">top</span></span></p>

 これは以下のように表示され、topが効いています。

ptop

 line-height:normalを指定しないと以下の表示になり、topが効きません。

ptop

関連ページ

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)