<IMG align="">画像とテキストの位置を指定

<IMG>のalign属性では、画像とテキストの縦の位置関係(並び方)を指定することができます。

これは画像(<IMG>)とテキストが同じ行の中に表示されている場合のみ有効となり、1行に収まりきらない長い文章などは画像の下に送られます。

また画像にテキストを回り込ませたい場合は、同じalign属性の値にleft、rightを指定します。 これについて詳しくは「画像にテキストを回り込ませる」で解説していますので、そちらをご覧ください。

align属性はHTML4.01では非推奨となっており、HTML5では廃止されています。 ですので画像とテキストの位置関係を設定する場合は、できるだけスタイルシートを利用して下さい。

使用した時の例

<p>imgのalign属性に
<img src="image/sample.jpg" width="130" height="87" alt="" align="top">
topを指定</p>

<p>imgのalign属性に
<img src="image/sample.jpg" width="130" height="87" alt="" align="middle">
middleを指定</p>

<p>imgのalign属性に
<img src="image/sample.jpg" width="130" height="87" alt="" align="bottom">
bottomを指定</p>

ブラウザ上の表示例

imgのalign属性に topを指定

imgのalign属性に middleを指定

imgのalign属性に bottomを指定

書式

  • <img src="画像url" alt="代替テキスト" align="位置"> ・・・・・・ 縦の位置関係

位置:top,middle,bottom

属性

align="bottom" 画像とテキストの縦の位置関係を設定
  • top・・・画像の上とテキストの上を揃える
  • middle・・・画像の中央とテキストのベースラインを揃える
  • bottom・・・画像の下とテキストのベースラインを揃える(初期値)

対応ブラウザなどのデータ

形式 <img src="" alt="" align=""> 分類 インライン要素
開始タグ 必須 終了タグ なし
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

align属性は、HTML5では廃止。代わりにスタイルシートのvertical-alignプロパティを利用して下さい。