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

説明

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

構文

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

vertical-align: 配置;

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

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

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

　middleは真ん中です。

テキスト利用例

　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指定と記述した部分は行の一番上に揃います。

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

画像利用例

　縦長の画像の右に短い画像を並べて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が文字の高さを基準としているのと、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が反映されています。

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

.t1 {
vertical-align:middle;
}

.t2 {
vertical-align:middle;
}

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

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

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

　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の所に表示されます。

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

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

留意点

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

　これは左の大きなフォントサイズの文字と右の小さなフォントサイズの文字を並べると、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が効いています。

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

関連ページ

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

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

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

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