Title

vertical-align とは

ここで説明する vertical-align とは次の語句からなる CSS のプロパティです。

vertical

読み: バーティカル
意味: 垂直

align

読み: アライン
意味: 配置

目次に戻る

vertical-align プロパティの概要

このプロパティは、インラインボックス、または表のセルボックスの垂直方向の配置を指定することができます。

インラインボックスの場合、インライン要素にインライン要素を内包した場合などインライン要素同士でも要素の高さに差が生まれることがあります。 このような場合、親インラインを基準にして、子インラインの垂直方向の配置を設定することができます。

表のセルボックスとは表要素のマス目のことですが、具体的にいうとth要素とtd要素のことです。 このセルボックス内でインラインの垂直方向の配置を設定することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{vertical-align: 設定値}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このサンプルでは以下の2つのサンプルを同じ設定値で検証していきます。

1.
div要素内に2のインラインテキストを配置します。 「Y」と「y」はdiv内の通常のテキストです。 そして「WORK」と「work」のテキストは b要素 を使用しています。 どちらの要素も font-size プロパティでテキストの大きさを設定しています(div要素は1.0cm, b要素は0.5cm)。

この場合、b要素のテキストをdiv要素内のインラインの、どの基準にあわせて表示するかを設定します。

2.
純粋に table 要素を使って、その中のth要素とtd要素の中でテキストの配置を設定します。

初期値: baseline

初期値であるbaselineキーワードは、 インラインを基底の配置に設定します。 つまり、高さの違うインライン要素がある場合には、底辺を揃える配置になります。

セル要素の場合にはセル内の他のインラインにベースを揃えます。

div{
	font-size: 1cm;
}
b{
	color: red;
	font-size: 0.5cm;
	vertical-align: baseline;
}
th,td{
	vertical-align: baseline;
}

目次に戻る

キーワード値: sub

インラインレベルでのsubキーワードは、 要素のベースラインを親要素の subscript-baseline に揃えます。 これは下付き文字の下辺にベースラインを揃えるということです。 下付き文字とは g j p q y などの文字のことですが、サンプルでは「y」の文字の底辺にベースが揃っています。

セル要素の場合には、このキーワードは意味を持ちません。

div{
	font-size: 1cm;
}
b{
	color: red;
	font-size: 0.5cm;
	vertical-align: sub;
}
th,td{
	vertical-align: sub;
}

目次に戻る

キーワード値: super

インラインレベルでのsuperキーワードは、 要素のベースラインを親要素の superscript-baseline に揃えます。 これは上付き文字の上辺にベースラインを揃えるということです。 上付き文字とは b d f h i k l t などの文字のことですが、この文字は基本的には大文字の高さと変わらないので、 親要素の上辺に子要素の上辺を揃える結果となります。 サンプルでは「Y」の文字の上辺にベースが揃っています。

セル要素の場合には、このキーワードは意味を持ちません。

div{
	font-size: 1cm;
}
b{
	color: red;
	font-size: 0.5cm;
	vertical-align: super;
}
th,td{
	vertical-align: super;
}

目次に戻る

キーワード値: text-top

インラインレベルでのtext-topキーワードは、 親要素の上辺に子要素の上辺を揃えます。

セル要素の場合には、このキーワードは意味を持ちません。

div{
	font-size: 1cm;
}
b{
	color: red;
	font-size: 0.5cm;
	vertical-align: text-top;
}
th,td{
	vertical-align: text-top;
}

目次に戻る

キーワード値: text-bottom

インラインレベルでのtext-bottomキーワードは、 親要素のベースラインにテキストの下辺を揃えます。

セル要素の場合には、このキーワードは意味を持ちません。

div{
	font-size: 1cm;
}
b{
	color: red;
	font-size: 0.5cm;
	vertical-align: text-bottom;
}
th,td{
	vertical-align: text-bottom;
}

目次に戻る

キーワード値: top

インラインレベルでのtopキーワードは、 親要素の上辺にテキストの下辺に揃えます。

セル要素の場合には、行ボックスの上辺をパディングとの境界に揃えます。

div{
	font-size: 1cm;
}
b{
	color: red;
	font-size: 0.5cm;
	vertical-align: top;
}
th,td{
	vertical-align: top;
}

目次に戻る

キーワード値: bottom

インラインレベルでのbottomキーワードは、 親要素のベースラインにテキストの上辺を揃えます。

セル要素の場合には、行ボックスの下辺をパディングとの境界に揃えます。

div{
	font-size: 1cm;
}
b{
	color: red;
	font-size: 0.5cm;
	vertical-align: bottom;
}
th,td{
	vertical-align: bottom;
}

目次に戻る

キーワード値: middle

インラインレベルでのmiddleキーワードは、 要素の中央が親インラインのbaseline + x-height / 2 で揃えます。 単純にいうと垂直方向の中央寄せとなります。

セル要素の場合には、セルのパディングボックスが行の中央に配置されます。

div{
	font-size: 1cm;
}
b{
	color: red;
	font-size: 0.5cm;
	vertical-align: middle;
}
th,td{
	vertical-align: middle;
}

目次に戻る

数値: 指定した数値分、上に揃える

インラインレベルでの数値による設定は、 要素のベースラインを親インラインの指定数値分上に揃えます。 負の数値を指定することで指定数値分下に揃えることができます。

セル要素の場合には、数値設定は意味を持ちません。

div{
	font-size: 1cm;
}
b{
	color: red;
	font-size: 0.5cm;
	vertical-align: 5px;
}
th,td{
	vertical-align: 5px;
}

目次に戻る

パーセンテージ値: line-heightに対する比率で揃える

インラインレベルでのパーセントによる設定は、 line-height プロパティの設定値に対する比率で指定します。 負の数値を指定することで指定パーセント分下に揃えることができます。

セル要素の場合には、パーセント設定は意味を持ちません。

div{
	font-size: 1cm;
}
b{
	color: red;
	font-size: 0.5cm;
	vertical-align: 10%;
}
th,td{
	vertical-align: 10%;
}

目次に戻る

グローバル値

vertical-alignプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のbaselineに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{vertical-align: グローバル値;}

目次に戻る

補足説明

• 要素のインラインボックスとテーブルのセルボックスのみ適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

vertical-align: baseline;

vertical-align: sub;

vertical-align: super;

vertical-align: text-top;

vertical-align: text-bottom;

vertical-align: top;

vertical-align: middle;

vertical-align: bottom;

vertical-align: 10px;

vertical-align: -10px;

vertical-align: 10%;

vertical-align: -10%;

目次に戻る