Last Update 2007/01/16
TOP - CSS1(Cascading Style Sheets, level 1) - vertical-align
親要素に対しての垂直方向の位置を指定します。
デフォルト値はbaselineです。
デフォルト値はbaselineです。
設定値
baseline : 親要素と下端合わせ
sub : 下付き文字とする
super : 上付き文字とする
top : 同じ行の最も高い位置にある要素の上端合わせ
text-top : 親要素の上端合わせ
middle : 親要素の中心合わせ
bottom : 同じ行の最も低い位置にある要素の下端合わせ
text-bottom : 親要素の下端合わせ
パーセント値 : 行のベースラインを基準としたline-heightに対する割合
0%はベースライン合わせ
(例)
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
P {font-size: 16pt;}
EM.test1 {font-size: 8pt; vertical-align: baseline}
EM.test2 {font-size: 8pt; vertical-align: sub}
EM.test3 {font-size: 8pt; vertical-align: super}
EM.test4 {font-size: 8pt; vertical-align: top}
EM.test5 {font-size: 8pt; vertical-align: text-top}
EM.test6 {font-size: 8pt; vertical-align: middle}
EM.test7 {font-size: 8pt; vertical-align: bottom}
EM.test8 {font-size: 8pt; vertical-align: text-bottom}
EM.test9 {font-size: 8pt; vertical-align: 0%}
EM.test10 {font-size: 8pt; vertical-align: 100%}
-->
</STYLE>
</HEAD>
<BODY>
<HR>
<P>-----<EM class="test1">abcde あいうえお baseline</EM></P>
<HR>
<P>-----<EM class="test2">abcde あいうえお sub</EM></P>
<HR>
<P>-----<EM class="test3">abcde あいうえお super</EM></P>
<HR>
<P>-----<EM class="test4">abcde あいうえお top</EM></P>
<HR>
<P>-----<EM class="test5">abcde あいうえお text-top</EM></P>
<HR>
<P>-----<EM class="test6">abcde あいうえお middle</EM></P>
<HR>
<P>-----<EM class="test7">abcde あいうえお bottom</EM></P>
<HR>
<P>-----<EM class="test8">abcde あいうえお text-bottom</EM></P>
<HR>
<P>-----<EM class="test9">abcde あいうえお 0%</EM></P>
<HR>
<P>-----<EM class="test10">abcde あいうえお 100%</EM></P>
<HR>
</BODY>
</HTML>