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

CSSのvertical-alignプロパティで、インライン要素またはテーブルのセル要素で垂直の位置を指定するサンプルです。

目次

仕様 vertical-alignプロパティの仕様
  インライン要素とは
  ベースラインとは
サンプル インライン要素で垂直の位置を指定する
  テーブルのセル要素で垂直の位置を指定する

vertical-alignプロパティの仕様

vertical-align : 値

vertical-alignプロパティは、インライン要素またはテーブルのセル要素での垂直の位置を指定します。

1.インライン要素に対しての指定
説明
baseline 親要素のbaseline に揃えます。(初期値)
top 行全体の上端に揃えます。
middle 親要素の中央に揃えます。
bottom 行全体の下端に揃えます。
text-top 親要素のフォントの上辺に揃えます。
text-bottom 親要素のフォントの下辺に揃えます。
super 上付き文字にします。
sub 下付き文字にします。
数値+単位 正の値は位置を上げます。負の値は位置を下げます。
数値+% line-heightプロパティに対する割合です。正の値は位置を上げます。負の値は位置を下げます。
2.テーブルのセル要素に対しての指定
説明
baseline baselineに揃えます。(初期値)
top 上に揃えます。
middle 中央に揃えます。
bottom 下に揃えます。
値を継承しない

インライン要素とは

インラインとは、英語でinlineです。

<p class="p1">テスト<span id="sp2">top</span></p>

上記のコードでは、<span id="sp2">から</span>がインライン要素です。<p class="p1">から</p>はブロック要素です。

以下は、MDNのインライン要素の一覧のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements#Elements

ベースラインとは

ベースラインは、アルファベット等の文字での基準となる線です。
(下限を揃えるが、pの場合は下に抜ける)

以下は、MDNのベースラインのリンクです。
https://developer.mozilla.org/ja/docs/Glossary/baseline

インライン要素で垂直の位置を指定する

インライン要素で垂直の位置を指定するサンプルです。

<style>
#sp1{vertical-align:baseline;} /* 親要素の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;} /* 正の値は位置を上げます + px */
#sp10{vertical-align:-10px;} /* 負の値は位置を下げます + px */
#sp11{vertical-align:10%;} /* 正の値は位置を上げます + % */
#sp12{vertical-align:-10%;} /* 負の値は位置を下げます + % */
.p1{border:1px solid black;font-size:16px;margin:5px 2px;width:300px;}
.p1 span{font-size:12px;} 
</style>
<p class="p1">テスト
	<span id="sp1">baseline</span>
	<span id="sp2">top</span>
	<span id="sp3">middle</span>
	<span id="sp4">bottom</span>
</p>
<p class="p1">テスト
	<span id="sp5">text-top</span>
	<span id="sp6">text-bottom</span>
</p>
<p class="p1">テスト
	<span id="sp7">super</span>
	<span id="sp8">sub</span>
</p>
<p class="p1">テスト
	<span id="sp9">10px</span>
	<span id="sp10">-10px</span>
</p>
<p class="p1">テスト
	<span id="sp11">10%</span>
	<span id="sp12">-10%</span>
</p>

以下は、実行結果です。

テスト baseline top middle bottom

テスト text-top text-bottom

テスト super sub

テスト 10px -10px

テスト 10% -10%

テーブルのセル要素で垂直の位置を指定する

テーブルのセル要素で垂直の位置を指定するサンプルです。

<style>
#td1{vertical-align:baseline;} /* 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>

以下は、実行結果です。

baseline top middle bottom

関連の記事

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

△上に戻る