アイコンとテキストを並べた時、縦位置のずれが気になることがあります。画像に 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>