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>
表示例
画像を右に配置して、
左側にテキストを回り込ませます。
回り込みを解除しました。
- サイト内検索
