CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

The CSS vertical-align property is used to align text and images vertically within inline elements and table cells.

vertical-align

　CSSの vertical-alignプロパティは、インライン要素やテーブルセル内のコンテンツの垂直方向の位置合わせを制御するために使用されます。このプロパティを適切に使用することで、テキストや画像などの要素を垂直方向に整列させ、デザインの一貫性と視覚的なバランスを保つことができます。

使用可能な値

キーワード値

baseline: 適用した要素のベースラインを親要素のベースラインに揃える（初期値）
sub: 要素を下付き文字の位置に配置します（テーブルセルへの指定は無効）
super: 要素を上付き文字の位置に配置します（テーブルセルへの指定は無効）
text-top: 要素の上端を親要素のフォントの上端に揃えます（テーブルセルへの指定は無効）
text-bottom: 要素の下端を親要素のフォントの下端に揃えます（テーブルセルへの指定は無効）
middle: 要素の中央を親要素のベースライン＋xハイトの半分の位置に揃えます
top: 要素の上端を行ボックスの上端に揃えます
bottom: 要素の下端を行ボックスの下端に揃えます

長さ・パーセンテージ値

長さ（例：10px, 2em）: 要素のベースラインを指定した長さだけ上下に移動します（ベースラインが揃った状態を0として、正の値なら上、負の値なら下へ移動）
パーセンテージ（例：50%）: 要素のラインボックスの高さに対するパーセンテージで位置を調整します（ベースラインが揃った状態を0として、正の値なら上、負の値なら下へ移動）

注意点

ブロック要素には適用されない: vertical-alignはインライン要素やテーブルセルに適用されますが、ブロック要素には影響しません。
親要素との関係: 位置合わせは親要素や周囲の要素に依存するため、意図した通りに表示されない場合は要素の構造を確認してください。
FlexboxやGridとの併用: 最近のレイアウト方法（FlexboxやGridレイアウト）では、垂直方向の位置合わせに専用のプロパティ（align-itemsやjustify-content）を使用することが推奨されます。

　vertical-alignプロパティは、それぞれの値を指定した際の実際の動作が理解しにくいもののひとつですが、以下のポイントを知っておくと、理解を深めるのに役立ちます。

インライン要素に適用した場合には、行ボックスの高さの範囲内での縦方向の位置を指定します。
テーブルセルに適用した場合には、セル内の縦方向の位置を指定しますが、vertical-alignプロパティの値の中にはテーブルセルに指定しても無効な値もあります。
初期値は「baseline」ですが、画像などはベースラインを持たないため、その下端が親要素のベースラインに揃えられます。
ベースライン（baseline）・テキストの下端（text-bottom）・下端（bottom）は混同しがちですが、ベースライン（baseline）はフォントの基準線、テキストの下端（text-bottom）とはフォントの一番下のライン、下端（bottom）とは行ボックスの一番下のラインです。
テキストの上端（text-top）・上端（top）は混同しがちですが、テキストの上端（text-top）とはフォントの一番上のライン、上端（top）とは行ボックスの一番上のラインです。
中央（middle）とは、フォントの場合は「0.5ex」、つまり「小文字 x の中心の高さ」のことです。画像の場合は画像の中心の高さとなります。

Sample

HTML

<div id="sample">
	<div><span class="rei">例</span><span class="oya">Example.<span class="sample1">baseline</span></span></div>
	<div><span class="rei">例</span><span class="oya">Example.<span class="sample2">top</span></span></div>
	<div><span class="rei">例</span><span class="oya">Example.<span class="sample3">middle</span></span></div>
	<div><span class="rei">例</span><span class="oya">Example.<span class="sample4">bottom</span></span></div>
	<div><span class="rei">例</span><span class="oya">Example.<span class="sample5">text-top</span></span></div>
	<div><span class="rei">例</span><span class="oya">Example.<span class="sample6">text-bottom</span></span></div>
	<div><span class="rei">例</span><span class="oya">Example.<span class="sample7">super</span></span></div>
	<div><span class="rei">例</span><span class="oya">Example.<span class="sample8">sub</span></span></div>
</div>

CSS

#sample div {background-color:#ccccff; margin:4px;}
.rei {font-size:60px;}
.oya {font-size:30px; background-color:#ccffcc;}
.sample1 {font-size:12px; background-color:#ffccff; vertical-align:baseline;}
.sample2 {font-size:12px; background-color:#ffccff; vertical-align:top;}
.sample3 {font-size:12px; background-color:#ffccff; vertical-align:middle;}
.sample4 {font-size:12px; background-color:#ffccff; vertical-align:bottom;}
.sample5 {font-size:12px; background-color:#ffccff; vertical-align:text-top;}
.sample6 {font-size:12px; background-color:#ffccff; vertical-align:text-bottom;}
.sample7 {font-size:12px; background-color:#ffccff; vertical-align:super;}
.sample8 {font-size:12px; background-color:#ffccff; vertical-align:sub;}

例Example.baseline

例Example.top

例Example.middle

例Example.bottom

例Example.text-top

例Example.text-bottom

例Example.super

例Example.sub

Sample 2

インライン画像の垂直位置調整

テキストの中にある画像を垂直方向に調整します。

　上記の例では、vertical-alignを使用して画像の垂直位置をテキストの中央、上端、下端に揃えることができます。

HTML

<p>
	テキストの中にある
	<img src="image.jpg" alt="Sample image" class="align-middle">
	画像を垂直方向に調整します。
</p>
<p>
	テキストの中にある
	<img src="image.jpg" alt="Sample image" class="align-top">
	画像を垂直方向に調整します。
</p>
<p>
	テキストの中にある
	<img src="image.jpg" alt="Sample image" class="align-bottom">
	画像を垂直方向に調整します。
</p>

CSS

.align-middle {
	vertical-align: middle;
}
.align-top {
	vertical-align: top;
}
.align-bottom {
	vertical-align: bottom;
}

Sample 3

テーブルセル内のコンテンツ位置調整

上揃えのセル

中央揃えのセル

下揃えのセル

　テーブル内でセルのコンテンツを垂直方向に揃える際にも vertical-alignが役立ちます。

HTML

<table>
	<tr>
		<td style="vertical-align: top;">上揃えのセル</td>
		<td style="vertical-align: middle;">中央揃えのセル</td>
		<td style="vertical-align: bottom;">下揃えのセル</td>
	</tr>
</table>

CSS

table {
	border: 1px solid;
}
td {
	border: 1px solid;
	height: 3em;
	padding: 10px;
}