CSS 垂直の位置を指定するサンプル(vertical-align)

CSSの垂直の位置を指定するサンプルです。
vertical-alignプロパティを使用します。

目次

vertical-align

vertical-align : 値
インライン要素に対しての指定
説明
baseline 親要素のbaseline に揃えます。(初期値)
top 行全体の上端に揃えます。
middle 親要素の中央に揃えます。
bottom 行全体の下端に揃えます。
text-top 親要素のフォントの上辺に揃えます。
text-bottom 親要素のフォントの下辺に揃えます。
super 上付き文字にします。
sub 下付き文字にします。
数値+単位 正の値は位置を上げます。負の値は位置を下げます。
数値+% line-heightプロパティに対する割合です。正の値は位置を上げます。負の値は位置を下げます。
テーブルのセル要素に対しての指定
説明
baseline baselineに揃えます。(初期値)
top 上に揃えます。
middle 中央に揃えます。
bottom 下に揃えます。
値を継承しない
  • 垂直の位置を指定します。
  • インライン要素、またはテーブルのセル要素に指定します。
  • ブロックレベル要素の縦方向の位置指定には使えません。
  • ベースラインは、以下の図のイメージです。
  • 以下はMDNのvertical-alignプロパティのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align

インライン要素のサンプル

vertical-alignのインライン要素のサンプルです。

行 example baseline

行 example top

行 example middle

行 example bottom

行 example text-top

行 example text-bottom

行 example super

行 example -sub

行 example 10px

行 example -10px

行 example 10%

行 example -10%

コード

上記サンプルのコードです。

<style>
#sp1{vertical-align:baseline;}
#sp2{vertical-align:top;}
#sp3{vertical-align:middle;}
#sp4{vertical-align:bottom;}
#sp5{vertical-align:text-top;}
#sp6{vertical-align:text-bottom;}
#sp7{vertical-align:super;}
#sp8{vertical-align:sub;}
#sp9{vertical-align:10px;}
#sp10{vertical-align:-10px;}
#sp11{vertical-align:10%;}
#sp12{vertical-align:-10%;}
.p1{border:1px solid black;font-size:20px;margin:5px 2px;width:250px;}
.p1 span{font-size:16px;}
.p1 span span{font-size:12px;}
</style>

<p class="p1">行 <span>example <span id="sp1">baseline</span></span></p>
<p class="p1">行 <span>example <span id="sp2">top</span></span></p>
<p class="p1">行 <span>example <span id="sp3">middle</span></span></p>
<p class="p1">行 <span>example <span id="sp4">bottom</span></span></p>
<p class="p1">行 <span>example <span id="sp5">text-top</span></span></p>
<p class="p1">行 <span>example <span id="sp6">text-bottom</span></span></p>
<p class="p1">行 <span>example <span id="sp7">super</span></span></p>
<p class="p1">行 <span>example <span id="sp8">-sub</span></span></p>
<p class="p1">行 <span>example <span id="sp9">10px</span></span></p>
<p class="p1">行 <span>example <span id="sp10">-10px</span></span></p>
<p class="p1">行 <span>example <span id="sp11">10%</span></span></p>
<p class="p1">行 <span>example <span id="sp12">-10%</span></span></p>

 

テーブルのセル要素のサンプル

vertical-alignのテーブルのセル要素のサンプルです。

1番上は、baselineです。baselineに揃えます。
2番目は、topです。上に揃えます。
3番目は、middleです。中央に揃えます。
4番目は、bottomです。下に揃えます。

baseline top middle bottom

コード

上記サンプルのコードです。

<style>
#td1{
	vertical-align:baseline;
}
#td2{
	vertical-align:top;
}
#td3{
	vertical-align:middle;
}
#td4{
	vertical-align:bottom;
}
#t1,#t1 td{border:1px solid #000;width:400px;max-width:100%;}
#t1 td{height:100px;width:25%;}
</style>

<table id="t1">
<tr>
	<td id="td1">baseline</td>
	<td id="td2">top</td>
	<td id="td3">middle</td>
	<td id="td4">bottom</td>
</tr>
</table>

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)
CSS 表示領域を超える場合の表示方法(overflow)
CSS 文字に線を引くサンプル(text-decoration)

△上に戻る