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

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

No.1 ベストアンサー 回答者： zeff#1 回答日時： 2010/09/18 13:38

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さん、すみません、大変遅れまして。
ありがとうございました。

お礼日時：2010/09/26 21:26