vertical-align: ***;
| ブラウザ |
|
|---|---|
| プロパティ |
vertical-align は、行内における垂直方向の揃え方を指定するプロパティです。
このプロパティをimg要素に対して設定すると、画像に並ぶテキストの位置を指定することができます。
img.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">
img.example1 { vertical-align: baseline; }
img.example2 { vertical-align: top; }
img.example3 { vertical-align: middle; }
img.example4 { vertical-align: bottom; }
img.example5 { vertical-align: text-top; }
img.example6 { vertical-align: text-bottom; }
img.example7 { vertical-align: -30px; }
img.example8 { vertical-align: 200%; }
</style>
</head>
<body>
<p><img src="rainbow.jpg" alt="［写真］" class="example1"> baseline を指定</p>
<p><img src="rainbow.jpg" alt="［写真］" class="example2"> top を指定</p>
<p><img src="rainbow.jpg" alt="［写真］" class="example3"> middle を指定</p>
<p><img src="rainbow.jpg" alt="［写真］" class="example4"> bottom を指定</p>
<p><img src="rainbow.jpg" alt="［写真］" class="example5"> text-top を指定</p>
<p><img src="rainbow.jpg" alt="［写真］" class="example6"> text-bottom を指定</p>
<p><img src="rainbow.jpg" alt="［写真］" class="example7"> -30px を指定</p>
<p><img src="rainbow.jpg" alt="［写真］" class="example8"> 200% を指定</p>
</body>
</html>
- 表示例
-
baseline を指定 top を指定 middle を指定 bottom を指定 text-top を指定 text-bottom を指定 -30px を指定 200% を指定