アイコン画像をテキストと一緒に表示するコツ « DRYOUT プログラマー社員のブログWebサイトを作るときに、ページの至る所で小さいアイコン画像をよく使います。文字だけよりも、横にその文字に関連するアイコンを付けた方が、より直感的で見栄えも良くなりますので。 しかし、そんな風にテキストの横にアイコンを並べようとしても、なぜかアイコンの表示される位置が微妙におかしいってことありませんか？ たとえばこんな感じです。 ご覧のとおり、アイコンとテキストの垂直位置がけっこうズレるんです。 この現象がなぜ起こるかという説明をし出すとややこしい話になるのですが、簡単に言えば原因は次のとおりです。 テキストと画像は同じインライン要素であって似て非なるもの 画像の縦サイズとテキスト サイズが異なるほどズレが目立ちやすい 解決法は、スタイルシート（CSS）を使用して、これらの原因をひとつひとつで解決するしかありません。ソリューションとなるスタイルシートは次のとおりです。 img { disp
