vertical-align プロパティは、テキストやインライン要素の垂直方向での配置を制御するために使用されます。以下は vertical-align プロパティの使い方の例です。
vertical-align プロパティは、主にインライン要素やテキストの配置に使用されます。これにより、文字や画像の配置が微調整でき、デザインの一貫性を保つのに役立ちます。注意点として、vertical-align はブロック要素にはほとんど影響を与えないことに注意してください。
目次
中央揃え（行内要素）を指定した使用例
|
1 2 3 4 5 |
span { vertical-align: middle; } |
タグ内のテキストが中央揃えに配置されます。これはインライン要素に対して使用されます。
ベースライン（デフォルト）を指定した使用例
|
1 2 3 4 5 |
p { vertical-align: baseline; } |
タグ内のテキストがベースライン（デフォルトの配置）に揃えられます。
上揃えを指定した使用例
|
1 2 3 4 5 |
.top-align { vertical-align: top; } |
.top-align クラスを持つ要素内のテキストが上揃えされます。テキストの上部が揃えられます。
下揃えを指定した使用例
|
1 2 3 4 5 |
img { vertical-align: bottom; } |
要素内のテキストが下揃えされます。テキストの下部が揃えられます。
数値を使用を指定した使用例
|
1 2 3 4 5 |
sup { vertical-align: 5px; } |
タグ内のテキストがベースラインから5ピクセル上に配置されます。数値を指定して独自の位置を設定できます。
相対位置指定した使用例
|
1 2 3 4 5 |
.relative-align { vertical-align: -0.5em; } |
.relative-align クラスを持つ要素内のテキストが、ベースラインから上方に半エム分の位置に配置されます。マイナスの値も指定できます。
テキストの上揃え（テキストと画像の配置）を指定した使用例
|
1 2 3 4 5 |
.text-top { vertical-align: text-top; } |
.text-top クラスを持つ要素内のテキストが、テキストの上部に揃えられ、隣接する画像などとの配置が調整されます。
テキストの下揃えを指定した使用例
|
1 2 3 4 5 |
.text-bottom { vertical-align: text-bottom; } |
.text-bottom クラスを持つ要素内のテキストが、テキストの下部に揃えられます。
ベースラインからの相対位置指定（下に配置）した使用例
|
1 2 3 4 5 |
.below-baseline { vertical-align: 1em; } |
.below-baseline クラスを持つ要素内のテキストが、ベースラインから1エム下に配置されます。
