スタイルシートリファレンス > vertical-align

スタイルシートリファレンス vertical-align


vertical-align 縦方向の揃え位置を指定する (IE3/N4)

縦方向の揃え位置を指定します。

baseline
ベースラインあわせ:規定値
top
上端揃え
middle
中央揃え
bottom
下端揃え
text-top
テキストの上限あわせ
text-bottom
テキストの下限あわせ
super
上付き文字の位置
sub
下付き文字の位置
数値指定
px,em
割合指定
%


px
画像を構成する最小単位 (モニタの解像度により変化)
em
文字の高さを1とした単位 (フォントサイズにより変化)

▲ページ先頭へ

使用例 vertical-align

ボックスを作りその中にサイズ違うテキストを配置します。

最後のテキストにスタイルを指定します。

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.smp1 {
font-size:30pt;
background-color:#cccccc;
}
.smp2 {
font-size:15pt;
background-color:#aaaaaa;
}
.smp01 {
font-size:9pt;
background-color:#ff0000;
vertical-align:baseline;
}
.smp02 {
font-size:9pt;
background-color:#ff0000;
vertical-align:top;
}
.smp03 {
font-size:9pt;
background-color:#ff0000;
vertical-align:text-top;
}
.smp04 {
font-size:9pt;
background-color:#ff0000;
vertical-align:super;
}
.smp05 {
font-size:9pt;
background-color:#ff0000;
vertical-align:middle;
}
.smp06 {
font-size:9pt;
background-color:#ff0000;
vertical-align:bottom;
}
.smp07 {
font-size:9pt;
background-color:#ff0000;
vertical-align:text-bottom;
}
.smp08 {
font-size:9pt;
background-color:#ff0000;
vertical-align:sub;
}
.smp09 {
font-size:9pt;
background-color:#ff0000;
vertical-align:2em;
}
.smp10 {
font-size:9pt;
background-color:#ff0000;
vertical-align:-50%;
}
-->
</style>
</head>
<body>
<div class="smp1">1
<span class="smp2">このように表示されます
<span class="smp01">baseline</span>
</span>
</div><br>

<div class="smp1">2
<span class="smp2">このように表示されます
<span class="smp02">top</span>
</span>
</div><br>

<div class="smp1">3
<span class="smp2">このように表示されます
<span class="smp03">text-top</span>
</span>
</div><br>

<div class="smp1">4
<span class="smp2">このように表示されます
<span class="smp04">super</span>
</span>
</div><br>

<div class="smp1">5
<span class="smp2">このように表示されます
<span class="smp05">middle</span>
</span>
</div><br>

<div class="smp1">6
<span class="smp2">このように表示されます
<span class="smp06">bottom</span>
</span>
</div><br>

<div class="smp1">7
<span class="smp2">このように表示されます
<span class="smp07">text-bottom</span>
</span>
</div><br>

<div class="smp1">8
<span class="smp2">このように表示されます
<span class="smp08">sub</span>
</span>
</div><br>

<div class="smp1">9
<span class="smp2">このように表示されます
<span class="smp09">2em</span>
</span>
</div><br>

<div class="smp1">10
<span class="smp2">このように表示されます
<span class="smp10">-50%</span>
</span>
</div><br>

</body>
</html>

▲ページ先頭へ

ブラウザ上の表示


1このように表示されますbaseline

2このように表示されますtop

3このように表示されますtext-top

4このように表示されますsuper

5このように表示されますmiddle

6このように表示されますbottom

7このように表示されますtext-bottom

8このように表示されますsub

9このように表示されます2em

10このように表示されます-50%

▲ページ先頭へ

関連項目【テキスト】

text-indent
インデント幅を指定する
text-align
テキストの配置を指定する
text-justify
均等割付の形式を指定する (IE5)
text-decoration
テキストの装飾を指定する
text-underline-position
下線の表示位置を指定する (IE55)
text-shadow ※
文字に影をつける
letter-spacing
文字の間隔を指定する
word-spacing
単語の間隔を指定する
text-transform
大文字・小文字表示を指定する
white-space
空白・改行の扱い方を指定する
vertical-align
縦方向の揃え位置を指定する
line-break
禁則処理の種類を指定する (IE5)
word-break
文の改行の仕方について指定する (IE5)
text-autospace
表意文字と非表意文字の間隔を指定する (IE5)
text-kashida-space
アラビア語などの配置を最善化する (IE55)
word-wrap
単語の途中で改行するかどうかを指定する (IE55)
writing-mode
縦書きにする (IE55)

▲ページ先頭へ

スタイルシートリファレンス > vertical-align