【vertical-align】文字の縦方向の位置揃え

vertical-alignプロパティでは、指定された要素が表示される行の中での、縦方向の位置揃え(表示位置)を設定することができます。

またvertical-alignプロパティは、行全体の揃え位置を指定できるわけではなく、インライン要素とテーブルのセル要素に対しての縦方向の位置揃えとなります。 インライン要素とセル要素に指定した場合では、それぞれ効果が異なり、セルにbaselineを指定すると、セル内で指定した最初の行のベースラインで揃えられます。 詳しくは下記の「値」を参照下さい。

なおsub、superは、Netscape4.7以前では、サポートされていないので注意して下さい。

書式

  • vertical-align : ……… 文字の垂直方向の位置を指定

★:baseline、top、inherit、他下記参照

baseline
指定した要素のボックスのベースラインを、親要素のボックスのベースラインに揃えます。指定した要素にベースラインがない場合は、ボックスの下の位置に揃えられます。またセル要素に指定した場合は、各セルの先頭の行のベースラインが揃えられます(横列全体)。
top
指定した要素のボックスの上を、親要素のボックスの上に揃えます。セルに対して設定した場合は、セルのボックスの上が横列全体の上に揃えられます。
middle
指定した要素のボックスの中心を、親要素のボックスの小文字xの中心に揃えます。セルに対し設定した場合は、セルのボックスの中心を横列全体の中心に揃えます。
bottom
指定した要素のボックスの下を、その親要素のボックスの下に揃えます。セルに指定した場合は、各セルの下が横列全体の下に揃えられます。
text-top
指定した要素のボックスの上を、親要素のテキストの上に揃えます。セルに対し設定した場合は、無効となりベースラインで揃えられます。
text-bottom
指定した要素のボックスの下を、親要素のテキストの下に揃えます。セルに対し設定した場合は、無効となりベースラインで揃えられます。
super
上付き文字で表示します。セルに指定した場合は無効となり、ベースラインで揃えられます。
sub
下付き文字で表示します。セルに指定した場合は無効となり、ベースラインで揃えられます。
実数値+単位
数値にpxやemなどの単位を付け、どれだけ上下させるか指定します。この場合、親ボックスのベースラインを0とし、正の値なら上、負の値なら下へ移動します。
パーセント値+%
line-heightプロパティの値に対する割合で、どれだけ上下させるか指定します。この場合、親ボックスのベースラインを0とし、正の値なら上、負の値なら下へ移動します。なお0%と指定した場合は、baselineを指定した場合と同じ結果になります。
ベースラインの位置

使用した時の例

.sample1 {vertical-align: baseline;}
.sample2 {vertical-align: top;}
.sample3 {vertical-align: middle;}
.sample4 {vertical-align: bottom;}
.sample5 {vertical-align: text-top;}
.sample6 {vertical-align: text-bottom;}
.sample7 {vertical-align: super;}
.sample8 {vertical-align: sub;}
.sample9 {vertical-align: 50%;}
.sample10 {vertical-align: -10px;}

/*背景やフォントサイズ*/
.sample100 { background:#FEE7F0; font-size:40px;}
span { font-size:12px;}
<div class="sample100">
  例
  <span class="sample1">baseline</span> 
  <span class="sample2">top</span>
  <span class="sample3">middle</span>
  <span class="sample4">bottom</span> 
  <span class="sample5">text-top</span>
  <span class="sample6">text-bottom</span>
  <span class="sample7">super</span>
  <span class="sample8">sub</span>
  <span class="sample9">50%</span>
  <span class="sample10">-10px</span>
</div>

<!-- 下記は実用的な使い方の例 -->
<div class="sample100">
  <p>リン酸の化学式はH<span class="sample8">3</span>PO<span class="sample8">4</span>となる</p>
  <p>ピタゴラスの定理(a<span class="sample7">2</span>=b<span class="sample7">2</span>+c<span class="sample7">2</span>)って知ってる?</p>
</div>

ブラウザ上の表示例

baseline top middle bottom text-top text-bottom super sub 50% -10px

リン酸の化学式はH3PO4となる

ピタゴラスの定理(a2=b2+c2)って知ってる?

対応ブラウザなどのデータ

初期値 baseline 値の継承 継承しない
適用可能な要素 インライン要素、セル要素(th要素td要素
メディア visual / linebox
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.2~ , Safari1~

関連情報