Loose-Info.com

Last Update 2019/12/25


TOP - CSS1(Cascading Style Sheets, level 1) - vertical-align

親要素に対しての垂直方向の位置を指定します。
デフォルト値は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>