[新着] Webテンプレートを仮オープンしました
vertical-align は、表示位置（縦方向）を指定するプロパティです。
iframe要素にこのスタイルを設定すると、インラインフレームに並ぶ文字の位置（縦方向）を指定できます。
#example {
vertical-align: middle;
}
| vertical-align | baseline … （標準位置）デフォルト |
|---|---|
| top または text-top … （インラインフレーム横の上部に文字を表示します） | |
| middle … （インラインフレーム横の中央に文字を表示します） | |
| bottom または text-bottom … （インラインフレーム横の下部に文字を表示します） | |
| 数値+単位 … （任意の位置に表示します） | |
| % … （任意の位置に表示します） |
※IEの場合（Operaも？）、top と bottom の指定はうまく機能しないようです。
■baseline
指定された要素内のベースラインと、親要素のベースラインを合わせます。
ベースラインが存在しない場合は、下端に合わせます。
■top
上端に合わせます。
■middle
中央に合わせます。
■bottom
下端に合わせます。
■text-top
親要素の文字の上端に合わせます。
■text-bottom
親要素の文字の下端に合わせます。
■数値+単位
baseline の位置が 0 となります。
この位置を基準に、指定した要素を上げ下げします。
正の値（上方向）、負の値（下方向）
■%
baseline の位置が 0% となります。
この位置を基準に、指定した要素を上げ下げします。
正の値（上方向）、負の値（下方向）
※行の高さ（line-heightプロパティの値）に対する割合となります。
【ベースラインとは】
英文などの場合、例えば x と y では下辺の位置が異なります。
x 文字のように、下側にはみ出ていない文字の下辺のラインを、ベースラインといいます。
※日本語の場合はベースラインは存在しません。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
iframe {
width: 200px;
height: 130px;
}
#example1 { vertical-align: baseline; }
#example2 { vertical-align: top; }
#example3 { vertical-align: middle; }
#example4 { vertical-align: bottom; }
#example5 { vertical-align: text-top; }
#example6 { vertical-align: text-bottom; }
#example7 { vertical-align: -30px; }
#example8 { vertical-align: 200%; }
-->
</style>
</head>
<body>
<p><iframe src="example.html" id="example1">サンプル</iframe>baseline を指定</p>
<p><iframe src="example.html" id="example2">サンプル</iframe>top を指定</p>
<p><iframe src="example.html" id="example3">サンプル</iframe>middle を指定</p>
<p><iframe src="example.html" id="example4">サンプル</iframe>bottom を指定</p>
<p><iframe src="example.html" id="example5">サンプル</iframe>text-top を指定</p>
<p><iframe src="example.html" id="example6">サンプル</iframe>text-bottom を指定</p>
<p><iframe src="example.html" id="example7">サンプル</iframe>-30px を指定</p>
<p><iframe src="example.html" id="example8">サンプル</iframe>200% を指定</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
baseline を指定
top を指定
middle を指定
bottom を指定
text-top を指定
text-bottom を指定
-30px を指定
200% を指定
