スタイルシート［CSS］/イメージ/画像に並ぶ文字の位置（縦方向）を指定する

vertical-align は、表示位置（縦方向）を指定するプロパティです。

img要素にこのスタイルを設定すると、画像に並ぶ文字の位置（縦方向）を指定できます。

#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 では下辺の位置が異なります。

opqrstuvwxyz

x 文字のように、下側にはみ出ていない文字の下辺のラインを、ベースラインといいます。
※日本語の場合はベースラインは存在しません。

使用例

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">

</style>

</head>
<body>

<img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example1"> baseline を指定

<img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example2"> top を指定

<img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example3"> middle を指定

<img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example4"> bottom を指定

<img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example5"> text-top を指定

<img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example6"> text-bottom を指定

<img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example7"> -30px を指定

<img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example8"> 200% を指定

</body>
</html>

▼これをブラウザで見ると次のように表示されます

サンプル baseline を指定

サンプル top を指定

サンプル middle を指定

サンプル bottom を指定

サンプル text-top を指定

サンプル text-bottom を指定

サンプル -30px を指定

サンプル 200% を指定

画像に並ぶ文字の位置（縦方向）を指定する

vertical-align: ***;

使用例