画像の横の文字位置を指定する

HTMLを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<p><img src="../img/smp.gif" width="150" height="150" align="top">サンプル【TOP】</p>
<p><img src="../img/smp.gif" width="150" height="150" align="middle">サンプル【MIDDLE】</p>
<p><img src="../img/smp.gif" width="150" height="150" align="bottom">サンプル【BOTTOM】</p>
</body>
</html>

表示サンプル

サンプル【TOP】

サンプル【MIDDLE】

サンプル【BOTTOM】

解説

「IMG」タグ内に「align」にてtop（上）、middle（中）、bottom（下）を指定することができます（ただし、非推奨の方法なので下記のCSSを使った方法をお奨めします）。

ＣＳＳを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
img.smp1 {vertical-align : top ;}
img.smp2 {vertical-align : middle ;}
img.smp3 {vertical-align : bottom ;}
img.smp4 {vertical-align : text-top ;}
img.smp5 {vertical-align : text-bottom ;}
-->
</style>
</head>
<body>
<p><img src="../img/smp.gif" width="150" height="150" class="smp1">[TOP]</p>
<p><img src="../img/smp.gif" width="150" height="150" class="smp2">[MIDDLE]</p>
<p><img src="../img/smp.gif" width="150" height="150" class="smp3">[BOTTOM]</p>
<p><img src="../img/smp.gif" width="150" height="150" class="smp4">[TEXT-TOP]</p>
<p><img src="../img/smp.gif" width="150" height="150" class="smp5">[TEXT-BOTTOM]</p>
</body>
</html>

表示サンプル

[TOP]

[MIDDLE]

[BOTTOM]

[TEXT-TOP]

[TEXT-BOTTOM]

解説

「vertical-align」を使い、縦方向の揃え位置を指定することができます。指定できるのは次の通りです。

  • baseline ：ベースラインを揃える（初期値）
  • top ：上端揃え
  • middle ：中央揃え
  • bottom ：下端揃え
  • text-top ：テキストの上端に揃える
  • text-bottom ：テキストの下端に揃える
  • super ：上付き文字として揃える
  • sub ：下付き文字として揃える
  • 数値 ：数値に px em ex 等の単位をつけて指定
  • ％値 ：line-heightプロパティの値に対する割合を%値で指定