CSS - vertical-align

トップ > CSSリファレンス > vertical-align

概要

属性名 vertical-align
auto | use-script | baseline | sub | super | top | text-top | central | middle | bottom | text-bottom | <percentage> | <length>
初期値未定義
適用可能要素インラインレベルまたはテーブルセル要素
継承継承しない
メディアVisual / Linebox
サポートC1 / e3 / N4 / Fx1 / Ch1 / Op3.2 / Sa1

説明

その行の中で一番高い(低い)要素や、親要素に対する上下方向の配置を指定します。

説明
topその行で一番高い要素の上端に、対象要素の上端を揃えます。(C1/e/Fx/Ch/Op/Sa)
bottomその行で一番低い要素の下端に、対象要素の下端を揃えます。(C1/e/Fx/Ch/Op/Sa)
text-top親要素の上端に、対象要素の上端を揃えます。(C1/e/Fx/Ch/Op/Sa)
super親要素の上付き文字の位置に、対象要素を表示します。(C1/e/Fx/Ch/Op/Sa)
middle親要素の中央に、対象要素の中央を揃えます。(C1/e/Fx/Ch/Op/Sa)
baseline親要素のベースラインに、対象要素のベースラインを揃えます。(C1/e/Fx/Ch/Op/Sa)
sub親要素の下付き文字の位置に、対象要素を表示します。(C1/e/Fx/Ch/Op/Sa)
text-bottom親要素の下端に、対象要素の下端を揃えます。(C1/e/Fx/Ch/Op/Sa)
auto自動算出します。通常は baseline になります。(C3/e/Fx/Ch/Op/Sa)
<percentage>autoよりも、対象要素の高さ×パーセント分、上にずらして表示します。(C1/e/Fx/Ch/Op/Sa)
<length>autoよりも、指定長さ分、上にずらして表示します。(C1/e/Fx/Ch/Op/Sa)
use-script未稿。(C3)
central未稿。(C3)

ベースラインは、下に突き出ない英文字(X や z など)の下限です。下に突き出る英文字(g, j, p, q, y)の下限はベースラインではありません。

Sample text ←baseline

Opera(11.62) では、sub, text-bottom, <percent>, <length> の実装が他のブラウザと異なっているようです。(バグ?)

使用例

CSS
.sample-box {
    margin-bottom: 1em;
    padding: 5px;
    border: 1px solid #666666;
    background-color: #ddaaaa;
}
.sample-string1 {
    padding: 0 5px;
    font-size: 48pt;
    border: 1px solid #666666;
    xbackground-color: #aaddaa;
}
.sample-string2 {
    padding: 0 5px;
    font-size: 24pt;
    border: 1px solid #666666;
    xbackground-color: #aaddaa;
}
.sample-string3 {
    font-size: 32pt;
    border: 1px solid #666666;
    background-color: #ddaaaa;
}
.sample-image {
    vertical-align: middle;
    width: 100px;
    height: 100px;
    border: 1px solid #666666;
}
.sample {
    margin: 0;
    padding: 0 2px;
    background-color: #aaaadd;
    border:1px solid #666666;
    font-size:8pt;
}
.sample.top { vertical-align: top; }
.sample.bottom { vertical-align: bottom; }
.sample.text-top { vertical-align: text-top; }
.sample.super { vertical-align: super; }
.sample.middle { vertical-align: middle; }
.sample.baseline { vertical-align: baseline; }
.sample.sub { vertical-align: sub; }
.sample.text-bottom { vertical-align: text-bottom; }
.sample.auto { vertical-align: auto; }
.sample.percent { vertical-align: 50%; }
.sample.length { vertical-align: -0.5em; }
HTML
<div class="sample-box">
  <span class="sample-string1">漢Xyz</span>
  <span class="sample-string2">漢Xyz</span>
  <span class="sample top">top</span>
  <span class="sample bottom">bottom</span>
</div>
<div class="sample-string3">
  漢Xyz
  <span class="sample text-top">text-top</span>
  <span class="sample super">super</span>
  <span class="sample middle">middle</span>
  <span class="sample baseline">baseline</span>
  <span class="sample sub">sub</span>
  <span class="sample text-bottom">text-bottom</span>
  <span class="sample auto">auto</span>
  <span class="sample percent">50%</span>
  <span class="sample length">-0.5em</span>
</div>
表示
漢Xyz 漢Xyz top bottom
漢Xyz text-top super middle baseline sub text-bottom auto 50% -0.5em

Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年5月4日
http://www.tohoho-web.com/css/prop/vertical-align.htm