IEでline-heightが効かない

|

例えば、メニューなど、ある程度高さのある要素にテキストを縦方向(垂直方向)に真ん中に持ってきたい場合は、line-heightを用いる方法があります。

しかし、画像とテキストを一緒に並べたときに、IE7ではline-heightが効かないバグに遭遇しました。調べてみますと、CSS HappyLifeさんの記事を見つけました。

ここではうまい解決方法にたどり着かれていませんでしたが、これを見てひらめいたことは、imgタグが悪いということです。displayプロパティでどうにかなりそうな気がしたので、試してみたらビンゴでした。

(X)HTMLコード

<p>
あああああ<img src="image.gif" alt="" />いいいいい
</p>

CSSコード

p img {
   display:inline-block;
   line-height:40px;
   vertical-align:middle;
}

これで、テキストも画像も縦方向(垂直方向)に中央寄せになります。

このページに関連する記事

最近のブログ記事