infomation
更新履歴
お勧め・人気記事
-
IE6にも対応、個人的『天地中央（上下中央）寄せ』決定版
なんか何もやる気しなくて、ずっと放置してたら二ヶ月経ってました。何を言ってるのか分（ｒｙ
今回は久しぶりにHTML周りの話を。だいぶ前に天地中央寄せ（上下中央寄せ）が騒がれて、
そのとき出てた方法は、自分の記憶が正しければ主に- position 50%を使ったもの
- display:table-cell を使ったもの
- display:inline-block を使ったもの
の三つがあったと思います。
（もうひとつ、 DIVを垂直方向に中央寄せするCSSサンプル：phpspot開発日記 というのも
マイナーですが、あります。Clearの使い方が絶妙で結構好きです。
今回紹介する方法の次善手ではないかと思ってます。）ただ、1はウィンドウを小さくすると切れる。
2,3は未対応ブラウザがある、さらに2は分かり辛い（あくまで個人的に）
と、何かしら欠点があったわけです。（最終的にはinline-blockの方法に落ち着くと思いますが）で、今回は1の方法で欠点を克服し、且それなりに綺麗なソースになるやり方を紹介します。
ただ四ヶ月前にメモした物なので、もしかしたらもう同じのが公開されているかもしれませんがｗ＃というかもう2年以上前の話なんですね、賞味期限切れ極まってる
◆まず、結論から
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </head> <body> <div id="body"> <div id="main"> </div> </div> <!--[if lte IE 6 ]><div style="width:800px;height:400px;"></div><![endif]--> </body> </html>CSS
*{ margin:0; } html{ height:100%; } body{ /* IE7以降,モダンブラウザ用 */ width:100%; min-width:800px; min-height:400px; /* ここまで */ height:100%; position:relative; } #body{ width:800px; height:400px; position:absolute; bottom:50%; right:50%; } #main{ width:800px; height:400px; position:absolute; top:200px; left:400px; background-color:green; border:black solid 5px; }◆どうして出来るのか
基本的な所はテキトーに検索すればでてくるので、他の差異部分を、
（min-width:800px;min-height:400px; の部分は既に
CSSでボックス要素を画面中央に表示させてみる - VERSIONFIVE で紹介されてた。
後で検索してみて泣いた。）↑だけだとIE6対応して無いのでそれを対応させるために
<!--[if lte IE 6 ]><div style="width:800px;height:400px;"></div><![endif]-->
を使って無理やり、最小幅、高さを作ります。これだけで、IE6対応の天地中央が作れます。
◆他サイトの解法達
- ボックスを上下左右画面中央に | CSS HappyLife
- CSSでボックス要素を画面中央に表示させてみる - VERSIONFIVE
- CSS で簡単に上下中央揃えを実現する | ヨモツネット ・・・inline-blockを使ったやり方。最新米に分かり易そうなのあり
- DIVを垂直方向に中央寄せするCSSサンプル：phpspot開発日記
◆関連する投稿
-
コメントはまだありません »
このエントリーにはまだレスポンスがありません。
コメントをどうぞ
サイト内検索
プロフィール
相互リンクRSS
- Pics Blog：1/1 09:00
- おととが作った日（ｒｙ：1/1 09:00
- フリーソフトの樹：3/13 21:01
- 花華花だよりプラスα：3/13 20:50
- Convenient Tools：3/13 16:35
- 二十歳街道まっしぐら：3/13 10:00
- NETAZINE：3/12 23:43
- kurox.net：3/10 02:55
- ORBIT SPACE：3/8 22:37
- 裏技shop DD：3/7 23:04
カテゴリー
アーカイブ
- 2010年1月 (2)
- 2009年12月 (1)
- 2009年11月 (3)
- 2009年10月 (1)
- 2009年9月 (2)
- 2009年8月 (2)
- 2009年6月 (1)
- 2009年4月 (4)
- 2009年3月 (3)
- 2009年2月 (1)
- 2009年1月 (1)
- 2008年11月 (2)
- 2008年10月 (1)
- 2008年9月 (1)
- 2008年5月 (2)
- 2008年4月 (3)
- 2008年3月 (3)
- 2008年2月 (1)
- 2008年1月 (2)
- 2007年12月 (2)
- 2007年11月 (4)
- 2007年10月 (4)
- 2007年9月 (4)
- 2007年8月 (2)
- 2007年7月 (13)
- 2007年6月 (19)
- 2007年5月 (11)
- 2007年4月 (11)
- 2007年3月 (12)
- 2007年2月 (7)