chocobit

html5テスト運用中

Search

ボックスの中央配置をMacIEにも適応させる

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU ブックマーク数

というエントリーがはてなブックマークで上がっていました。

Web creators 2007年 03月号 (P.56) に記載されていた『CSSのみでボックスをブラウザの中央に配置する』というCSSの記述方法を紹介したものです。

実際に使用することは少ないかもしれませんが、昔はテーブルレイアウトでやっていた中央配置をCSSでやるというのは、何となく実装したくなるもの。このサイトでも2つ前のエントリー内で最後に上げた「404 Not Found ページ」にて実装しています。

http://chocobit.com/404.html

ここの Not Found ページに限っては、文字の大きさを変更しても改行されずに表示させるため、あえて親ボックスの横幅（ついでに縦幅も）のサイズを固定させず、横幅の負marginの単位をemにし、フォントサイズを変更しながら微調整するという、ちょっと変則パターンにしています。（ただし、IE6ではフォントサイズによっては改行してしまうようです...）

このボックスを中央配置する方法、このままではMacIEで表示が崩れてしまいます。横はセンター位置にくるのですが、縦のセンターが効かずにブラウザの上部に上半分が隠れる形になってしまいます。「今さらMacIEって...」と思う人もいるかもしれませんが、MacIEにハックをかけている人は今も多いと思うので、これを解消させる方法を紹介します。

やり方は、スタイルシートに

/*\*//*/
#mainbox {
   position: fixed;
}
/* */

と記述。これだけです。（※メインボックスのdiv要素 id="mainbox" とした場合）
テストページ

前後の /*\*//*/ ～ /* */ は囲まれた部分のみMacIEに適用させるハックです。
要はMacIEだけpositionを absolute → fixed としただけですね。簡単でした。以上。

Tag

Message

Message

Trackbacks (0)

TrackBack URL

Page Top