画像と文字の位置関係

広告

文字列と画像が含まれる文書を作成した場合に、画像と文字列の縦方向の位置関係を指定します。位置関係を指定するには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 )