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

vertical-alignプロパティを使うと文字や画像の垂直位置を変更出来ます。
vertical-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のテキストでの利用例は以下の通りです。上の記述が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指定と記述した部分は行の一番上に揃います。
p親top
次はtop、text-top、middle、text-bottom、bottomと順に指定しています。又、分かり易さのため背景を付け、line-heightで160%を指定して行を高くしています。
p親toptext-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が文字の高さを基準としているのと、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
必ずしも文字は必要ではなく、例えば左の図にも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の所に表示されます。
P20px
以下はそれぞれ-1.5emと110%と指定した例です。
P-1.5em110%
このように-や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が効いています。
p親top
line-height:normalを指定しないと以下の表示になり、topが効きません。
p親top
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ