<img src="" alt="" align="">
| ブラウザ |
|
|---|---|
| 分類 | |
| 要素 |
img要素に align="" を追加すると、画像に並ぶテキストの位置を指定できます。また、画像をフロートさせることもできます。
<img src="sample.gif" alt="サンプル" align="top">
| 属性 | 値 | 説明 |
|---|---|---|
align="" |
top |
上端揃え |
middle |
中央揃え | |
bottom |
下端揃え （初期値） | |
left |
左フロート | |
right |
右フロート |
上記の属性は、HTML 4.01では非推奨とされています。（Strict DTDでは使用できません）
画像に並ぶテキストの位置
top、middle、bottom は、 画像に並ぶテキストの位置（垂直方向）を指定します。
top… 画像の上端とテキスト行の上端を揃えます。middle… 画像の中央とテキスト行のベースラインを揃えます。bottom… 画像の下端とテキスト行のベースラインを揃えます。
フロートの指定
left と right は、画像のフロート（浮動化）を指定します。
left… 画像を左に配置して、後続の内容を右側に回り込ませます。right… 画像を右に配置して、後続の内容を左側に回り込ませます。
フロートを指定する場合は、回り込みを解除するもご覧ください。
並ぶテキストの扱いについて
top、middle、bottom… 画像の横には1行分のテキストが並びます。left、right… 画像の横に複数行のテキストを回り込ませることができます。
top を指定している場合は、
改行されたテキストは画像の下に続きます。
left を指定している場合は、
改行されたテキストも画像の横に続きます。
ベースラインについて
英文などの場合、例えば x と y では下辺の位置が異なります。
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>
- 表示例
-
画像を右に配置して、
左側にテキストを回り込ませます。
回り込みを解除しました。