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 文字のように、下側にはみ出ていない文字の下辺ラインを、ベースラインといいます。
- 日本語の場合はベースラインは存在しません。
使用例
<!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% を指定