2011年09月22日

IE6 CSS 上下左右中央寄せ

上下左右中央寄せ


基本的に最近のブラウザだとcssで
text-align: center;
display: table-cell;
vertical-align: middle;

これを書いておけば上下左右中央寄せになりますが、
IE6ではダメだったので苦労した結果を記載

他のサイト


他のサイトを色々見ると
display: inline;
zoom: 1;

でできるとか書いてあるところも何個かあったのですが
全然ダメでした。
他にも色々ありましたがややこしいので諦めました。
その時は他にもmin-widthやmax-widthのIE6版でも調べていたのですが、
横幅最大180pxでにしたい場合
width: expression(this.clientWidth > 180? "180px" : "auto");

とすればできるようになります。(180pxにしたいとき > 180だとダメなときもとか言う話も。。)
document.body.clientWidthも多くありましたが数値を正しく取れるところと取れない所がありました。
その場合thisだと取れます。(ただし、場所によってはCPU跳ね上がって動かなくなったりしました。)

最小は>を<に変えるだけ
heightはclientWidthでなくclientHeightにすれば良い。

これを使用する場合expressionが無駄にメモリを食うという話もあったのでご注意を

解決方法


* html #main img {
padding-top: expression(this.clientHeight > 150? "0" : ((150 - this.clientHeight) / 2) + "px");
}

* htmlはIE6だけの処理
#mainのimgの最大横幅は150
151以上ならばpadding-topは0
150以下ならば(150-画像の横幅)÷2のサイズの空白をセットするといった具合です。

とりあえずこれでうまくいきました。
posted by RicK at 19:05| Comment(0) | TrackBack(0) | 日記
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/48093984

この記事へのトラックバック