CSS - vertical-align
概要
属性名 | vertical-align |
---|---|
値 | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> |
初期値 | baseline |
適用可能要素 | インラインレベルまたはテーブルセル要素 |
継承 | 継承しない |
メディア | Visual / Linebox |
サポート | C1 / e3 / N4 / Fx1 / Ch1 / Op3.2 / Sa1 |
説明
vertical-align はテーブルセルとテーブルセル以外に指定する場合で動作が異なります。テーブルセル以外に指定した場合は、自要素や親要素の高さに対する位置ではなく、親要素に含まれるテキストの中で、基準となるテキストや、一番高さを持つテキストに対する位置を指定します。
高xy基準xy22
←top
←text-top
←super
←middle
←baseline
←text-bottom
←sub
←bottom
値 | 説明 |
---|---|
top | その行で一番高いテキストの上端に、要素の上端を揃えます。 |
bottom | その行で一番低いテキストの下端に、要素の下端を揃えます。 |
text-top | 基準テキストの上端に、要素の上端を揃えます。 |
text-bottom | 基準テキストの下端(文字yの下端)に、要素の下端を揃えます。 |
middle | 基準テキストの文字xの高さの中央に、要素の中央を揃えます。 |
baseline | 基準テキストのベースライン(文字Mの下端)に、対象要素のベースラインを揃えます。(C1/e/Fx/Ch/Op/Sa) |
super | 標準テキストの上付文字のベースラインに要素のベースラインを揃えます。 |
sub | 標準テキストの下付文字のベースラインに要素のベースラインを揃えます。 |
<percentage> | 対象要素の高さ×パーセント分、上にずらして表示します。 |
<length> | 指定長さ分、上にずらして表示します。 |
テーブルセル (<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; background-color: #aaddaa; } .sample-string2 { padding: 0 5px; font-size: 24pt; border: 1px solid #666666; background-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.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 percent">50%</span> <span class="sample length">-0.5em</span> </div>
表示
漢Xyz
漢Xyz
top
bottom
漢Xyz
text-top
super
middle
baseline
sub
text-bottom
50%
-0.5em
Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年5月4日
https://www.tohoho-web.com/css/prop/vertical-align.htm