vertical-align(バーティカル・アライン)について

行内要素の縦方向の位置を設定するプロパティです。インライン要素、テーブルセル要素のみに適用されます。ブロック要素は一切適用されません。

vertical-align(バーティカル・アライン)の概念図

baselineのブラウザ表示例

■CSS記述
.sample1 { font-size:60px; background:#ccc; }

.sample2 { font-size:30px; background:#eee; }

.sample3 { color:#fff; font-size:9px; vertical-align:baseline; background:#f00; background:#f00; }
■XHTML記述
<p><span class="sample1">sample</span><span class="sample2">sample<span class="sample3">sample</span></span></p>

samplesamplesample

topのブラウザ表示例

■CSS記述
.sample1 { font-size:60px; background:#ccc; }

.sample2 { font-size:30px; background:#eee; }

.sample4 { color:#fff; font-size:9px; vertical-align:top; background:#f00; }
■XHTML記述
<p><span class="sample1">sample</span><span class="sample2">sample<span class="sample4">sample</span></span></p>

samplesamplesample

middleのブラウザ表示例

■CSS記述
.sample1 { font-size:60px; background:#ccc; }

.sample2 { font-size:30px; background:#eee; }

.sample5 { color:#fff; font-size:9px; vertical-align:middle; background:#f00; }
■XHTML記述
<p><span class="sample1">sample</span><span class="sample2">sample<span class="sample5">sample</span></span></p>

samplesamplesample

bottomのブラウザ表示例

■CSS記述
.sample1 { font-size:60px; background:#ccc; }

.sample2 { font-size:30px; background:#eee; }

.sample6 { color:#fff; font-size:9px; vertical-align:bottom; background:#f00; }
■XHTML記述
<p><span class="sample1">sample</span><span class="sample2">sample<span class="sample6">sample</span></span></p>

samplesamplesample

text-topのブラウザ表示例

■CSS記述
.sample1 { font-size:60px; background:#ccc; }

.sample2 { font-size:30px; background:#eee; }

.sample7 { color:#fff; font-size:9px; vertical-align:text-top; background:#f00; }
■XHTML記述
<p><span class="sample1">sample</span><span class="sample2">sample<span class="sample7">sample</span></span></p>

samplesamplesample

text-bottomのブラウザ表示例

■CSS記述
.sample1 { font-size:60px; background:#ccc; }

.sample2 { font-size:30px; background:#eee; }

.sample8 { color:#fff; font-size:9px; vertical-align:text-bottom; background:#f00; }
■XHTML記述
<p><span class="sample1">sample</span><span class="sample2">sample<span class="sample8">sample</span></span></p>

samplesamplesample

superのブラウザ表示例

■CSS記述
.sample1 { font-size:60px; background:#ccc; }

.sample2 { font-size:30px; background:#eee; }

.sample9 { color:#fff; font-size:9px; vertical-align:super; background:#f00; }
■XHTML記述
<p><span class="sample1">sample</span><span class="sample2">sample<span class="sample9">sample</span></span></p>

samplesamplesample

subのブラウザ表示例

■CSS記述
.sample1 { font-size:60px; background:#ccc; }

.sample2 { font-size:30px; background:#eee; }

.sample10 { color:#fff; font-size:9px; vertical-align:sub; background:#f00; }
■XHTML記述
<p><span class="sample1">sample</span><span class="sample2">sample<span class="sample10">sample</span></span></p>

samplesamplesample

数値指定のブラウザ表示例

■CSS記述
.sample1 { font-size:60px; background:#ccc; }

.sample2 { font-size:30px; background:#eee; }

.sample10 { color:#fff; font-size:9px; vertical-align:-30px; background:#f00; }
■XHTML記述
<p><span class="sample1">sample</span><span class="sample2">sample<span class="sample10">sample</span></span></p>

samplesamplesample

vertical-align(バーティカル・アライン)の設定方法

vertical-align: (値);

vertical-align(バーティカル・アライン)の値

数値
mm , cm , in , pt , pc , em , ex , px , %
※ベースラインの位置を0として、上げたい時は普通に単位を付けて数値を入力。下げたい時は(-)を付けて数値を入力。
baseline
初期値です。ベースラインに揃える。
top
要素の上に揃える。
middle
要素の中心に揃える。
bottom
要素の下に揃える。
super
上付き文字にする。
sub
下付き文字にする。