<img src="" alt="" align="">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類
要素

img要素align="" を追加すると、画像に並ぶテキストの位置を指定できます。また、画像をフロートさせることもできます。


<img src="sample.gif" alt="サンプル" align="top">

属性 説明
align="" top 上端揃え
middle 中央揃え
bottom 下端揃え (初期値)
left 左フロート
right 右フロート

上記の属性は、HTML 4.01では非推奨とされています。(Strict DTDでは使用できません)

画像に並ぶテキストの位置

topmiddlebottom は、 画像に並ぶテキストの位置(垂直方向)を指定します。

  • top … 画像の上端とテキスト行の上端を揃えます。
  • middle … 画像の中央とテキスト行のベースラインを揃えます。
  • bottom … 画像の下端とテキスト行のベースラインを揃えます。

フロートの指定

leftright は、画像のフロート(浮動化)を指定します。

  • left … 画像を左に配置して、後続の内容を右側に回り込ませます。
  • right … 画像を右に配置して、後続の内容を左側に回り込ませます。

フロートを指定する場合は、回り込みを解除するもご覧ください。

並ぶテキストの扱いについて

  • topmiddlebottom … 画像の横には1行分のテキストが並びます。
  • leftright … 画像の横に複数行のテキストを回り込ませることができます。

[写真] top を指定している場合は、
改行されたテキストは画像の下に続きます。

[写真] left を指定している場合は、
改行されたテキストも画像の横に続きます。

ベースラインについて

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

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

x 文字のように、下側にはみ出ていない文字の下辺ラインを、ベースラインといいます。

  • 日本語の場合はベースラインは存在しません。

使用例

画像右側の上部にテキストを表示した例

<p>
<img src="rainbow.jpg" alt="写真" align="top">
右側の上部にテキストを表示します。
</p>

表示例

写真 右側の上部にテキストを表示します。

画像右側の中央にテキストを表示した例

<p>
<img src="rainbow.jpg" alt="写真" align="middle">
右側の中央にテキストを表示します。
</p>

表示例

写真 右側の中央にテキストを表示します。

画像右側の下部にテキストを表示した例

<p>
<img src="rainbow.jpg" alt="写真" align="bottom">
右側の下部にテキストを表示します。(デフォルト)
</p>

表示例

写真 右側の下部にテキストを表示します。(デフォルト)

左フロートを指定した例

<p>
<img src="rainbow.jpg" alt="写真" align="left">
画像を左に配置して、
<br>
右側にテキストを回り込ませます。
<br clear="left">
回り込みを解除しました。
</p>

表示例

写真 画像を左に配置して、
右側にテキストを回り込ませます。
回り込みを解除しました。

右フロートを指定した例

<p>
<img src="rainbow.jpg" alt="写真" align="right">
画像を右に配置して、
<br>
左側にテキストを回り込ませます。
<br clear="right">
回り込みを解除しました。
</p>

表示例

写真 画像を右に配置して、
左側にテキストを回り込ませます。
回り込みを解除しました。