IE7での上下中央寄せ

会社で作成していたページのレイアウトが崩れたので修正した。
しかし、IE7でだけ若干上下がずれてしまった。

原因は
line-height
だった。

単一行を上下中央寄せをしていたのだが、複数行になったのでレイアウトが崩れてしまった。

以前、ヨモツネットさんを見ていたので簡単に修正できると思ったが、そうはいかなかった。
というのも今回修正するのは

<div class='foo'>
<div class='bar'>aaa</div>
</div>

のようなものだったからだ、と思う。

はっきり言って、何故うまくいかなかったかわからない。

それで、元々jQuery使っているページなので、JavaScriptで高さを取得して中央寄せになるように適度にマージンを入れてあげる事にした。
私のようにJavaScriptが素人でもちゃんと動いてくれた。

$('bar').each( function () {
var h = $(this).height();
var h_offset = (50 - h) / 2; // 50は外枠の高さで決めうちしている。
$(this).css("margin-top", h_offset );
}

のような感じだった。

しかし、なんでうまく行かなかったんだろう、と思うと同時に、IE7が嫌いになった。

CSSでうまくやろうとして、5時間ぐらいなやみ、JavaScriptは1時間で出来た。
最初からJavaScriptでやれば良かった。

関連記事はありません