vertical-align: ***;
- ブラウザ
- 特性
- vertical-align
vertical-align は、行内における垂直方向の揃え方を指定するプロパティです。
このプロパティをiframe要素に対して設定すると、インラインフレームに並ぶテキストの位置を指定することができます。
iframe.example {
vertical-align: middle;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| vertical-align | baseline | インラインフレームの下端と、親要素のベースラインを揃える （初期値） |
| top | インラインフレームの上端と、行の上端を揃える | |
| middle | インラインフレームの中心と、親要素のx文字の中心を揃える | |
| bottom | インラインフレームの下端と、行の下端を揃える | |
| text-top | インラインフレームの上端と、親要素のフォントの上端を揃える | |
| text-bottom | インラインフレームの下端と、親要素のフォントの下端を揃える | |
| 数値+単位（px 等） | 任意の位置に揃える （正の値は上方向、負の値は下方向に移動） | |
| パーセント | 任意の位置に揃える （正の値は上方向、負の値は下方向に移動） |
- 「数値+単位」と「パーセント」の指定は、baseline が基準の位置となります。
- 「パーセント」の指定は、行の高さ（line-height）に対する割合となります。（SafariとChromeは、他のブラウザとは異なる表示結果になってしまうようです）
【ベースラインについて】
英文などの場合、例えば x と y では下辺の位置が異なります。
x 文字のように、下側にはみ出ていない文字の下辺ラインを、ベースラインといいます。
※日本語の場合はベースラインは存在しません。
bottom の指定は、IE 7以下とFirefoxでは表示結果が異なります。（IE 8ではFirefoxと同じ表示結果になるようです）
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
iframe {
width: 200px;
height: 130px;
}
iframe.example1 { vertical-align: baseline; }
iframe.example2 { vertical-align: top; }
iframe.example3 { vertical-align: middle; }
iframe.example4 { vertical-align: bottom; }
iframe.example5 { vertical-align: text-top; }
iframe.example6 { vertical-align: text-bottom; }
iframe.example7 { vertical-align: -30px; }
iframe.example8 { vertical-align: 200%; }
</style>
</head>
<body>
<p><iframe src="example.html" class="example1">代替内容</iframe> baseline を指定</p>
<p><iframe src="example.html" class="example2">代替内容</iframe> top を指定</p>
<p><iframe src="example.html" class="example3">代替内容</iframe> middle を指定</p>
<p><iframe src="example.html" class="example4">代替内容</iframe> bottom を指定</p>
<p><iframe src="example.html" class="example5">代替内容</iframe> text-top を指定</p>
<p><iframe src="example.html" class="example6">代替内容</iframe> text-bottom を指定</p>
<p><iframe src="example.html" class="example7">代替内容</iframe> -30px を指定</p>
<p><iframe src="example.html" class="example8">代替内容</iframe> 200% を指定</p>
</body>
</html>
表示例
baseline を指定
top を指定
middle を指定
bottom を指定
text-top を指定
text-bottom を指定
-30px を指定
200% を指定
- サイト内検索
