[HTML] テキストに並ぶ画像(アイコン)の位置ずれ問題 : してログ

[HTML] テキストに並ぶ画像(アイコン)の位置ずれ問題

CSS 2013115

アイコンとテキストを並べた時、縦位置のずれが気になることがあります。画像に vertical-align:middle などと指定しても、どうしてもしっくりした位置に来ないと思いませんか? ちょっと冗長ですが、テーブルタグで囲んで、それぞれの td に vertical-align:middle を指定したときがいちばん自然な位置に来ます。が、やっぱり冗長過ぎるでしょってことで、試行錯誤してみました。

画像とテキストを並べただけ
にゃんこ
<img src="/images/icon/16x16/cat.png" />にゃんこ
画像に vertical-align:middle を指定
にゃんこ
<img style="vertical-align:middle;" src="/image/icon/16x16/cat.png" />にゃんこ
テーブルの td に vertical-align:middle を指定
にゃんこ
<table><tr>
  <td style="vertical-align:middle;"><img src="/images/icon/32x32/cat.png" /></td>
  <td style="vertical-align:middle;">にゃんこ</td>
</tr></table>
span で囲み display:inline-block、vertical-align:middle を指定
にゃんこ
<span style="display:inline-block;vertical-align:middle;"><img src="/image/icon/32x32/cat.png" /></span><span style="display:inline-block;vertical-align:middle;">にゃんこ</span>

という訳で、最後の inline-block を使用したものが最適という解を導きだしました。これを CSS で汎用的なクラスを定義しておけば、かなりスッキリとしたコードを書けると思います。

追記(2016-12-02)

アクセス解析から、久しぶりに見直していたら、どれも横に並んでいないことに気づきました。HTML5 / CSS3 にしたからなのか何なのか分かりませんが、これはマズイということで、改めて試行錯誤してみました。まだ、改良の余地があるかもしれません(画像の縦サイズをテキストの line-height に入れないといけないのが気に入らない)。

今のところの最適版
にゃんこ
<img style="vertical-align:top;" src="/images/icon/32x32/cat.png" /><span style="display:inline-block;line-height:32px;">にゃんこ</span>
4 件のコメント
通りすがりの名無し2015-03-11 Wed 16:03
画像に vertical-align:middle を指定
<img style="vartical-align:middle;" src="/image/icon/16x16/cat.png" />にゃんこ

とありますが、スペルが間違ってます。
vartical-align → vertical-align

本来、imgに指定でいけるかと思います。

今更ですが、間違える人がいるといけないので一応。
LANDHERE2015-03-11 Wed 18:34
>通りすがりの名無しさん
ご指摘ありがとうございます。
修正させていただきました。
匿名2015-09-06 Sun 09:39
これが知りたかった!助かりました
nao2018-03-23 Fri 19:03
助かりました!本当にありがとうございます。
名前:
コメント: