2012年11月アーカイブ

例えば、メニューなど、ある程度高さのある要素にテキストを縦方向(垂直方向)に真ん中に持ってきたい場合は、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;
}

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

IE6やIE7で閲覧した際に、marginやpaddingを0に指定しているのに、画像の上部に謎の余白が空いている場合があります。

これは、フォントのサイズが画像よりも大きい場合に起こります。

例えば、hタグに画像を使った場合、特にフォントのサイズは指定しないと思うのですが、実際にはブラウザのデフォルトのフォントサイズが適用されていますので、IEではその分の大きさの領域を占領してしまうのです。

できるだけリセットCSSを利用して、hタグの大きさを普通のサイズ程度に小さくしておくのが無難ですね。