CSS - vertical-align - とほほのWWW入門

属性名	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

vertical-align はテーブルセルとテーブルセル以外に指定する場合で動作が異なります。テーブルセル以外に指定した場合は、自要素や親要素の高さに対する位置ではなく、親要素に含まれるテキストの中で、基準となるテキストや、一番高さを持つテキストに対する位置を指定します。

高xy基準xy²₂ ←top ←text-top ←super ←middle ←baseline ←text-bottom ←sub ←bottom

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

テーブルセル (<th>, <td>, display:table-cell が指定された要素)で vertical-align が指定された場合は、自身の要素の高さに対する子要素の位置を指定します。

top

middle

bottom

値	説明
top	その行で一番高いテキストの上端に、要素の上端を揃えます。
middle	基準テキストの文字xの高さの中央に、要素の中央を揃えます。
bottom	その行で一番低いテキストの下端に、要素の下端を揃えます。

上下方向のセンタリングを行うには、vertical-align を用いるよりも他のテクニックを利用するのが一般的です。詳細は「センタリング(中央揃え・中央寄せ)」を参照してください。

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

CSS - vertical-align

概要

説明

使用例