ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

imgとテキスト、水平に揃わない

テキストに画像の回り込みや、同じブロック上に配置する場合ですが、入れ子になるCSSの指定方法によってはブラウザでの表示の仕方がことなり、テキストと画像の水平位置が揃わないことがあります。


その場合、imgタグに回り込み指定や、CSSのvertical-alignの指定をmiddleにしても解消されない場合がありますが、その場合、imgタグに水平位置のIDを割り振りすることにより解消される場合があります。


<div class="img-txt">
<img id="img-vertical" src="image/a.gif" />あいうえお
</div>

CSSのimg-verticalのプロパティ。

#img-vertical{
vertical-aling:middle;
}


line-heightやheight、paddingなどいろいろな指定をするのですがまったく画像イメージとテキストの水平位置が揃わない場合に有効です。