HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

ヴァーティカル アライン

vertical-alignプロパティ

要素内や行における、縦方向の表示位置を指定するプロパティです。

  • 初期値

    baseline

  • 継承

    不可

  • 適用できる要素

    インラインレベル要素、テーブルセル要素

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

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

パターン1

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

CSSコード例

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

表示例:

topの適用例 middleの適用例 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>

表示例:

supの適用例上付き文字

subの適用例下付き文字


パターン3

次の例では、%値を指定することで表示位置を設定しています。

CSSコード例

<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>

表示例:

50%の適用例:テキスト

-30%の適用例:テキスト

0%の適用例:テキスト

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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