| プロパティ名 | 値 | 適用対象 | 継承 |
|---|---|---|---|
| vertical-align: | 縦方向の位置 | インライン要素・th,td要素 | なし |
| 値 | 説明 | |
|---|---|---|
| 縦方向の位置 | top | 行の上に揃えて配置。 |
| middle | 行の中央に揃えて配置。 | |
| bottom | 行の下に揃えて配置。 | |
| super | 上付き文字にして表示。 | |
| sub | 下付文字にして表示。 | |
| baseline | ベースラインに揃えて表示(デフォルト）。 | |
| text-top | 上をその行のフォントの上に合わせる。 | |
| text-bottom | 下をその行のフォントの上に合わせる。 | |
| 単位付数値 | その行のベースラインを0とした値の±。 | |
| % | その行のベースラインを0とした行の高さに対する 割合。 |
vertical-alignプロパティは、指定されたインライン要素が表示される行の中での、
縦方向の位置を指定します。値には、top、middle、bottom、super、sub、baseline、text-top、
text-bottom、単位付数値、%のどれかを指定します。このプロパティは、行全体の縦方向の位置を指定するのではなく、
指定されたインライン要素を、その行の中で縦方向のどの位置に配置するかを指定するものです。
なお、th要素、またはtd要素に指定した場合には、top,middle,bottomは、
それぞれセル内の「上」「中心」「下」に揃えられ、baselineを指定した場合は、
セル内の最初の行のベースラインに揃えられます。
●画像の下に指定する場合は、Internet Explorerでは、bottomではなく値にbaselineを指定します。
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
.sampl01{vertical-align:top}
.sampl02{vertical-align:middle}
.sampl03{vertical-align:bottom}
.sampl04{vertical-align:baseline}
p {font-size:20pt}
span {font-size:9pt;
color:red
}
div {font-size:12pt;
color:red
}
td {width:100px;
height:100px;
border:1px solid black;
text-align:center;
color:red
}
table {border-collapse:collapse}
-->
</style>
</head>
<body>
<p>日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。
江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。<span class="sampl01">日本全国の東照宮の総本社的存在である。
(フォントサイズ9ptで、行の上に配置しました)</span></p>
<p>日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。
江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。<span class="sampl02">日本全国の東照宮の総本社的存在である。
(フォントサイズ9ptで、行の中央に配置しました)</span></p>
<p>日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。
江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。<span class="sampl03">日本全国の東照宮の総本社的存在である。
(フォントサイズ9ptで、行の下に配置しました)</span></p>
<div><img src="画像URL" class ="sampl01">金閣寺(画像の上に配置)</div>
<div><img src="画像URL" class ="sampl02">金閣寺(画像の中央に配置)</div>
<div><img src="画像URL" class ="sampl04">金閣寺(画像の下に配置)</div>
<table>
<tr><td class="sampl01">上に配置</td><td class="sampl02">中央に配置</td><td class="sampl03">下に配置</td></tr>
</table>
</body>
</html>
