img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

How to arrange image and character

画像と文字の並べ方

画像の隣に文字を並べる際、画像のサイズによっては 文字が綺麗に並ばない事があります。
例:  画像の隣に文字を入力 画像の隣に文字を入力

上記のように 画像と文字を直接並べると下の位置に合わせて並ぶので、画像と文字がズレて綺麗に並びません。


vertical-align を使う

<img>に対して style="vertical-align: 揃える位置;" を指定すると、画像を文字のどこに揃えるか指定出来ます。
vertical-align: top; 画像と行の上端に揃える
vertical-align: middle; 画像の中央に揃える
vertical-align: baseline; 画像の下端とベースラインに揃える(初期値)
vertical-align: bottom; 画像と行の下端に揃える

例: 画像の隣に文字を入力 画像の隣に文字を入力
<img src="****.gif" style="vertical-align: middle;">画像の隣に文字を入力
スタイルシートで一括指定する場合
img {
vertical-align: 揃える位置;
}



テーブルを使って画像と文字を並べる

例:
画像の隣に文字を入力 画像の隣に文字を入力

例: 上記のテーブル枠を非表示にした場合
画像の隣に文字を入力 画像の隣に文字を入力


画像にネガティブマージン(マイナスマージン)を付けて並べる

例:  画像の隣に文字を入力 画像の隣に文字を入力
<img src="****.gif" style="margin-bottom : 下方向の数値;">画像の隣に文字を入力
下方向のマージンは -(マイナス)数値 で表します。
例: 下マージン無し→ ow to use   下マージン有り→ow to use
<img src="****.gif" style="margin-bottom : -7px;">ow to use