- ベストアンサー
CSSに関する質問です。position absolute Blockのセンタリングについて
position: relative; 指定されたBlockについては、margin:0 auto; 指定によって、IEバグ対策も施した上でセンタリングすることに成功しました。ところが、ある別のIEバグ対策のためにそのブロック指定をabsoluteに変更した所、CSSはそれ以外何も変えないのに、今までセンタリング出来ていたブロックが途端に左寄せになってしまいました。 そこで質問です。そもそもabsolute指定されたブロックは、上記の方法ではセンタリング出来ないのでしょうか？ どうすればabsolute指定されたブロックをCSSによってセンタリング出来るのでしょうか？ どうかお教えください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
簡単そうで、難しいテーマですね。 “relative” --> 相対配置 “absolute” --> 絶対配置 “absolute”は、絶対配置なので親兄弟との流し込みやマージンなどのボッ クス設定値に、影響されません。位置を決めるのは、「top, left, right, bottom」といったプロパティで指定します。 左寄せ、右寄せ、センタリングなどの概念そのものがありません。 下記の【例１】では、一見センタリングされているように見えますが、 “margin”、“padding”や内包された要素の設定しだいで、レイアウトが崩 れる可能性があります。 また、“#midst”ブロックは、幅をパーセント指定しているのでセンタリン グ出来ていますが、これをピクセルなどの数値で固定すると、センタリング を導き出す基点を求められません。（パーセント指定も怪しいが） 何が言いたいのか分からなくなってきましたが、センタリングに固執するな ら“position”を使用しない【例２】のような方法はいかがですか。 「IEバグ」とかに対処できているかは、分かりませんが・・・。 【例１】 --------------------------------------------------------------- <html><head><title>TEST</title> <style type="text/css"><!-- html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: #fff; } #midst { position: absolute; top: 50px; left: 10%; width: 80%; height: 220px; background: #ccc; } --></style> </head><body> <div id="midst"><h1>TEST</h1></div> </body></html> 【例２】 --------------------------------------------------------------- <html><head><title>TEST 2</title> <style type="text/css"><!-- body { margin: 20px 0; padding: 0; background: #eee; text-align: center; } #content { width: 640px; margin: 0 auto; border: 1px solid #000; background: #fff; text-align: left; } #doc { width: 480px; float: right; background: #ccc; } #navi { background: #ffc; } --></style> </head><body> <div id="content"> <div id="doc"><h1>TEST 2<br><br><br><br><br></h1></div> <div id="navi">LINK 1<br>LINK 2<br style="clear:both"></div> </div> </body></html> --------------------------------------------------------------- ※ “#navi”ブロックの <br style="clear:both"> は必須！
その他の回答 (1)
- otasuke009
- ベストアンサー率38% (234/601)
参考ＵＲＬの情報はどうでしょうか？
お礼
cssに関するいくつかのサイトを探索したのですが、教えて戴いたものは到達していませんでした。ありがとうございました。 しかし、紹介されたサイトを見ても懸案は解決しませんでした。まだまだ基礎の基礎が理解出来ていないかも知れません。
お礼
懇切丁寧な回答ありがとうございました。 結局、absolute配置はセンタリング出来ないということが分かっていなかったようです。 例1も例2も内容は理解出来ましたので、更なる研鑽を積みたいと思います。 レスが遅れて申し訳ありませんでした。