ブログトップ 記事一覧 ログイン 無料ブログ開設

PageTAKAの日記(写真、 PC、 岡山) このページをアンテナに追加 RSSフィード

写真、パソコン、ネット、岡山、西大寺。●この下はGoogleAdsense広告:リンク先に詳細情報↓

2011-05-20

CSS 中央揃えできないIEのバグ

| CSS 中央揃えできないIEのバグを含むブックマーク CSS 中央揃えできないIEのバグのブックマークコメント

古いインターネット・エクスプローラでは、CSSで中央揃えができないバグがあります。

普通、CSSで中央揃えをするときは、marginを使います。下は例です。

div.wrapper{margin:0 atuo}

解説:divで「wrapper」という名前(今回はクラス名)を付けた範囲は、その親要素(例えば、bodyなど)に対して、上下margin(≒外の隙間)は0、左右marginはautoに設定しなさいと設定しています。

CSSでは、二つ(今回は0とauto)が指定されたときは、最初は上下、二つ目は左右に関係する設定となります。そして、autoは、左右を自動的に同じだけ隙間を設けなさい、ということです。

というようなことで、普通はOKです。しかし、IE(インターネットエクスプローラ)ではバージョンによって、このCSS設定がうまく働かないことがあるようです。CSSを設定しても左寄りになってしまうみたいです。

そこで、ネットを改めて調べて見たら、次のような頁を見つけました。

>> センタリングの不具合(IE/margin)

解決方法が書いてありますね。

この結果、次のようにすればよいことが分かります。

「body」「div.wrapper」の二つの要素で考えると、cssは次のようになるということですね。

body{text-align:center}
div.wrapper{text-align:left}

解説:本来divはブロック要素なのでbodyで設定したインライン要素のtext-align:centerは効かないはずですが、IE対策としてはこれを使います。div.wrapperでは文字などのインライン要素がすべて中央揃えにならないよう、左寄せになるよう設定し直して、文字などの表示は期待した状態に近くなり、同時に「wrapper」は画面表示の中央揃えとして表示されている…はずです。

ほかにも、表示幅を計算し、position:absoluteを使って、無理矢理中央揃えとして配置する方法もありそうです。TAKAも備忘録として書いておかないと、忘れそうであります。

トラックバック - http://d.hatena.ne.jp/PageTAKA/20110520/p1
リンク元