画像の上下位置
IMG要素の位置関係は、ほかの要素が持つものより複雑で、通常のLEFT/CENTER/RIGHTだけではなく、 TOP｜MIDDLE｜BOTTOM があります。
- 画像と文字の位置を決める。
- style="vertical-align: 上中下の値 " 値： TEXT-TOP｜MIDDLE｜TEXT-BOTTOM
他に、BASELINE｜BOTTOM｜TOP｜SUPER｜SUB｜数値＋単位｜% - 左右画像位置を決める（文字列と画像を左右に分ける）回り込み
- style=" float: 左右の値 " 値： LEFT｜RIGHT
他に IE や NN ブラウザの独自拡張で TEXTTOP｜ABSMIDDLE｜CENTER｜BASELINE｜ABSBOTTOM 等の属性値を持っています。
・IMG要素が持つTOP/MIDDLE/BOTTOM
インライン要素としてのIMG要素が持つTOP/MIDDLE/TEXT-BOTTOM
IMG要素は、貼り込まれた画像と、それに並ぶテキキスト（文字）の大きさは同じではないため、その文字列（行）の書き出しを決めるために「上側・中央・下側」を使います。
画像と並ぶ文字をどう配置するかが、「 STYLE=" VERTICAL-ALIGN：値 "
の値：TEXT-TOP/MIDDLE/TEXT-BOTTOM」のVERTICAL-ALIGNスタイルと3つの属性値の役割（レイアウト）です。
画像の上部に文字列
下の画像はともゆきフリー写真集（ゆんPhotoGallery）さんより、戴いた画像です。
・STYLE=" VERTICAL-ALIGN : TEXT-TOP " 指定時のソース：
画像の上に記述した文字列（行）です。[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]<BR>
画像と同じラインに記述した文字列（行）です。
<IMG src="yun_206.jpg" STYLE=" VERTICAL-ALIGN : TEXT-TOP ">[][][][][][][][][]<BR>
画像の下に記述した文字列（行）です。[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
・TEXT-TOP 表示例：
画像の上に記述した文字列（行）です。[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
画像と同じラインに記述した文字列（行）です。
[][][][][][][][][]
画像の下に記述した文字列（行）です。[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
文字列（行）は、画像の上から書き出されているのが解ります。
画像の中央に文字列
・STYLE=" VERTICAL-ALIGN : MIDDLE"指定時のソース：
画像の上に記述した文字列（行）です。[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]<BR>
画像と同じラインに記述した文字列（行）です。
<IMG src="yun_206.jpg" STYLE=" VERTICAL-ALIGN : MIDDLE">[][][][][][][][][]<BR>
画像の下に記述した文字列（行）です。[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
・MIDDLE 表示例：
画像の上に記述した文字列（行）です。[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
画像と同じラインに記述した文字列（行）です。[][][][][][][][][]
画像の下に記述した文字列（行）です。[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
文字列（行）は、画像の中央から書き出されているのが解ります。
画像の下部に文字列
・STYLE=" VERTICAL-ALIGN : TEXT-BOTTOM"指定時のソース：
画像の上に記述した文字列（行）です。[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]<BR>
画像と同じラインに記述した文字列（行）です。
<IMG src="yun_206.jpg" STYLE=" VERTICAL-ALIGN : TEXT-BOTTOM">[][][][][][][][][]<BR>
画像の下に記述した文字列（行）です。[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
・TEXT-BOTTOM 表示例：（属性指定しないときと同じです）画像の上に記述した文字列（行）です。[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
画像と同じラインに記述した文字列（行）です。
[][][][][][][][][]画像の下に記述した文字列（行）です。[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
文字列（行）は、画像の下から書き出されているのが解ります。
画像の左右配置（LEFTとRIGHT）については、次のページで解説します。
【←BACK ┃NEXT→】