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

*vertical-align: ***;*

ブラウザ
特性: 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 文字のように、下側にはみ出ていない文字の下辺ラインを、ベースラインといいます。
※日本語の場合はベースラインは存在しません。

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">

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="siodome-01.jpg" alt="［写真］" class="example1"> baseline を指定</p>

<p><img src="siodome-01.jpg" alt="［写真］" class="example2"> top を指定</p>

<p><img src="siodome-01.jpg" alt="［写真］" class="example3"> middle を指定</p>

<p><img src="siodome-01.jpg" alt="［写真］" class="example4"> bottom を指定</p>

<p><img src="siodome-01.jpg" alt="［写真］" class="example5"> text-top を指定</p>

<p><img src="siodome-01.jpg" alt="［写真］" class="example6"> text-bottom を指定</p>

<p><img src="siodome-01.jpg" alt="［写真］" class="example7"> -30px を指定</p>

<p><img src="siodome-01.jpg" alt="［写真］" class="example8"> 200% を指定</p>

</body>
</html>

表示例

［写真］ baseline を指定

［写真］ top を指定

［写真］ middle を指定

［写真］ bottom を指定

［写真］ text-top を指定

［写真］ text-bottom を指定

［写真］ -30px を指定

［写真］ 200% を指定

サイト内検索

イメージ

画像に並ぶテキストの位置（垂直方向）を指定する

vertical-align: ***;

【ベースラインについて】

使用例

関連ページ

*vertical-align: ***;*