文字の垂直位置設定
文字の垂直位置を設定します。
値には、次のような指定方法あります。
親要素のベースラインを０とし、そこからの垂直位置を単一貴の数値で設定します。正の値では上に、負の値では下に移動します。親要素のベースラインを０とし、そこからの垂直位置をline-heightプロパティで設定された高さに対する割合で指定します。正の値では上に、負の値では下に移動します。HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css>
<title>文字の垂直位置設定</title>
<style type="text/css">
<!--
.sample1 {vertical-align:baseline}
.sample2 {vertical-align:super}
.sample3 {vertical-align:sub}
.sample4 {vertical-align:top}
.sample5 {vertical-align:middle}
.sample6 {vertical-align:bottom}
-->
</style>
</head>
<body>
<p>これは<span class="sample1"> ベースライン（標準）</span>です</p>
<p>これは<span class="sample2"> 上付文字</span>です</p>
<p>これは<span class="sample3"> 下付文字</span>です</p>
<p>topを指定<img src="D0.GIF" class="sample4"> </p>
<p>middleを指定<img src="D0.GIF" class="sample5"> </p>
<p>bottomを指定<img src="D0.GIF" class="sample6"> </p>
</div>
</body>
</HTML>これは、ベースライン（標準）です
これは、上付文字です
これは、下付文字です
topを指定
middleを指定
bottomを指定
HTMLタグで文字の行揃えを指定するには、次のようにalign属性を利用します。
HTMLタグのalign属性の多くは、Deprecated（推奨しない）とされており、行揃えはスタイルシートで指定することが推奨されています。また、スタイルシートなら上記以外の要素の行揃えを指定することも可能です（ただし、ブロックレベル要素のみ）。同様の効果をスタイルシートで表現すると以下のようになります。