1. Home
  2. スタイルシート CSS
  3. イメージ
  4. 画像に並ぶテキストの位置(垂直方向)を指定する

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


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は、他のブラウザとは異なる表示結果になってしまうようです)

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

英文などの場合、例えば xy では下辺の位置が異なります。

[ベースラインの表示例]

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="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% を指定


イメージ

ページの先頭へ