vertical-align CSS2.2

vertical-align は、インライン要素やテーブルセル内の文字の垂直位置の指定に使います。「super」「sub」はセル要素では無効になります。

名前:vertical-align
値: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
初期値:baseline
適用対象:inline-level and 'table-cell' elements（インラインレベルとテーブルセル要素）
継承:しない
パーセンテージ:要素自体の line-height を参照
メディア:visual（視覚的）
計算値:<percentage>と<length>は絶対的長さ。それ以外は指定通り。

Value（値）

baseline
初期値
top
上寄せ
middle
中央揃え
bottom
下寄せ
text-top
テキストに対して上寄せ
text-bottom
テキストに対して下寄せ
super
上付き文字
sub
下付き文字
<length>
数値＋単位で指定
<percentage>
その要素のline-height プロパティに対する割合を指定（数値＋％）
inherit
親要素の値を継承する

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   .test1 { vertical-align: baseline; }
   .test2 { vertical-align: top; }
   .test3 { vertical-align: middle; }
   .test4 { vertical-align: bottom; }
   .test5 { vertical-align: text-top; }
   .test6 { vertical-align: text-bottom; }
   .test7 { vertical-align: super; }
   .test8 { vertical-align: sub; }
   .test9 { vertical-align: -70%; }
   .test10 { vertical-align: -30%; }
   .test11 { vertical-align: 30%; }
   .test12 { vertical-align: 70%; }
   .test13 { vertical-align: 100%; }
   .test14 { vertical-align: -50px; }
   .test15 { vertical-align: -25px; }
   .test16 { vertical-align: -10px; }
   .test17 { vertical-align: 10px; }
   .test18 { vertical-align: 25px; }
   .test19 { vertical-align: 50px; }
  </style>
 </head>
 <body>
   /* インライン要素での指定 */
   <span class="test1">baseline</span>
   <span class="test2">top</span>
   <span class="test3">middle</span>
   <span class="test4">bottom</span>
   <span class="test5">text-top</span>
   <span class="test6">text-bottom</span>
   <span class="test7">super</span>
   <span class="test8">sub</span>
   /* 数値による指定 */
   <span class="test9">-50px</span>
   <span class="test10">-25px</span>
   <span class="test11">-10px</span>
   <span class="test12">10px</span>
   <span class="test13">25px</span>
   <span class="test14">50px</span>
   /* ％による指定 */
   <span class="test15">-70%</span>
   <span class="test16">-30%</span>
   <span class="test17">30%</span>
   <span class="test18">70%</span>
   <span class="test19">100%</span>
 </body>
</html>

display（インライン要素での指定）

baselinetopmiddlebottomtext-toptext-bottomsupersub

※ 「top」と「text-top」、「bottom」と「text-bottom」の表示される位置は少し違います。

display（数値による指定）

baseline |-50px|-25px|-10px|10px|25px|50px

display（％による指定）

baseline |-70%|-30%|30%|70%|100%

セル内での表示のされ方

top middle bottom text-top text-bottom

※ 「text-top」と「text-bottom」はセル内では無効です。

vertical-align CSS3

名前:vertical-align
値: <‘baseline-shift’> || <‘alignment-baseline’>
初期値:baseline
適用対象:inline-level boxes（インラインレベルボックス）
継承:しない
パーセンテージ:n/a
メディア:visual（視覚的）
計算値:As specified（指定通り）
アニメーション:discrete（離散的）

◎ まだ途中です。<‘baseline-shift’> と <‘alignment-baseline’> のページを作成したらまた書き加えます。

上に戻る