vertical-alignプロパティ

値

次のような値を設定することができます。

• baseline – 親要素のベースラインに配置。初期値
• top – 親要素のコンテンツ表示領域の最上部に配置
• middle – 垂直中央に配置
• bottom – 親要素のコンテンツ表示領域の最下部に配置
• sub – 下付き文字の位置に合わせて配置
• super – 上付き文字の位置に合わせて配置
• text-top – 親要素のコンテンツ表示領域の最上部に配置
• text-bottom – 親要素のコンテンツ表示領域の最下部に配置
• %値 – 行の高さに対する割合で位置を指定します。
• 値 + 単位 – 任意の数値と単位（px、pt、em）で指定。ベースラインを基準に、上方向に配置するなら正の値、下方向に配置するなら負の値を指定します。

パターン1

次の例では、table要素の中で3つ並べたtd要素の対し、左から順に「top」、「middle」、「bottom」を指定しています。

CSSコード例

.box1 {
	vertical-align: top;
}
.box2 {
	vertical-align: middle;
}
.box3 {
	vertical-align: bottom;
}

表示例：

パターン2

次の例では、テキスト中の上付き文字sup要素に対して「super」を、下付き文字sub要素に対しては「sub」を指定しています。

CSSコード例

<style type="text/css">
.sample_css2 .text1,
.sample_css2 .text2 {
	font-size: 20px;
}
.sample_css2 .text1 sup {
	vertical-align: super;
	font-size: 10px;
}
.sample_css2 .text2 sub {
	vertical-align: sub;
	font-size: 10px;
}
</style>
<div class="sample_css2">
	<p class="text1">supの適用例<sup>上付き文字</sup></p>
	<p class="text2">subの適用例<sub>下付き文字</sub></p>
</div>

表示例：

<style type="text/css">
.sample_css3 .text1 span {
	vertical-align: 50%;
}
.sample_css3 .text2 span {
	vertical-align: -30%;
}
.sample_css3 .text3 span {
	vertical-align: 0%;
}
</style>
<div class="sample_css2">
	<p class="text1">50%の適用例：<span>テキスト</span></p>
	<p class="text2">-30%の適用例：<span>テキスト</span></p>
	<p class="text2">0%の適用例：<span>テキスト</span></p>
</div>

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。