画像と文字の位置関係

文字列と画像が含まれる文書を作成した場合に、画像と文字列の縦方向の位置関係を指定します。位置関係を指定するにはimg要素のalign属性を使います。

<img src="画像URI" alt="代替テキスト" align="位置関係" />

※align属性は非推奨属性の為、「Transitional DTD」または「Frameset DTD」でしか使用できません。(DTDについては「DTDの種類」を参照して下さい)。

align属性には「top」「middle」「bottom」のいずれかの値を指定します。(他に「left」及び「right」も指定可能ですが、こちらは次のページで確認します)。それぞれの値を指定した場合の位置関係は次のようになります。

align属性	位置関係
top	画像の上辺と文字の上辺を合わせる
middle	画像の中央と文字のベースラインを合わせる
bottom	画像の下辺と文字のベースラインを合わせる

なおデフォルトでは「bottom」となっています。

例えばalign属性に「middle」を設定した場合、文字のベースラインの位置に画像の中央が来るように配置されます。

サンプル

では実際に試してみます。下記のようなサンプルページを作成しました。今回は非推奨属性を使用していますので「XHTML1.0 Transitional DTD」で作成しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>動物園2008年12月</title>
  </head>
  <body>
    <h1>ライオン</h1>

    <p>
    今日は雌ライオン<img src="img/lion_s.png" alt="ライオン" align="top" />
    が一匹外に出ていて、ちょうどガラスの目の前でウトウトしています。
    </p>

    <p>
    今日は雌ライオン<img src="img/lion_s.png" alt="ライオン" align="middle" />
    が一匹外に出ていて、ちょうどガラスの目の前でウトウトしています。
    </p>

    <p>
    今日は雌ライオン<img src="img/lion_s.png" alt="ライオン" align="bottom" />
    が一匹外に出ていて、ちょうどガラスの目の前でウトウトしています。
    </p>

  </body>
</html>

ブラウザで表示すると次のように表示されます。

p3-1

middleを指定した場合、画像と文字の中央が揃うのではなく画像の中央と文字のベースラインを揃える点に注意して下さい。

なおalign属性は非推奨属性なのでStrict DTDでは使用できません。今後はスタイルシートのvertical-alignプロパティを使う事で同じような設定を行うことが出来ます(設定が難しいプロパティの為、詳しくはスタイルシートのページで解説します)。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。