アイコンと文字を並べる時アイコンが上にずれる

質問

アイコンと文字を並べる時アイコンが上にずれる
<img src="images/icon.png" alt="" ><a href="tenken.php">点検</a>
上記のようにアイコンを２０×２０で作ったら文字より上にずれてしまいます。
何か良い方法はないんでしょうか？

回答No.1

zeff · ベストアンサー

font-sizeはおそらく16pxとか14pxとか、20pxよりは小さいでしょうから、
それだとアイコン画像の上部分がピョコンと出た状態になります。
まず、imgの位置を
img{vertical-align:top;}
として、
line-heihtを20pxに合わせればよござんしょう。

.hoge{
line-height:20px;
}
.hoge img{
vertical-align:top;
}

<p class="hoge">
<img src="images/icon.png" alt="" width="20" height="20"><a href="tenken.php">点検</a>
</p>

もしくは
<span class="hoge">
<img src="images/icon.png" alt="" width="20" height="20"><a href="tenken.php">点検</a>
</span>

とか。

これで文字が縦位置で中央に来るはず。

お礼

zeffさん、すみません、大変遅れまして。
ありがとうございました。