- ベストアンサー
ＨＴＭＬ、ＣＳＳの質問です
HTML,CSSを勉強している初心者です。 ＣＳＳでの、ブロックレベル要素のセンタリグについての質問です。 縦のセンタリングはどうすればいいのでしょうか？ 横のセンタリングは、左右のマージンをautoにすると上手くいくのですが、上下のマージンにautoを設定してもセンタリングされません。 縦６００px、横６００pxのdivbox（トップページ)を作って、bodyのなかで縦横ともにセンタリングさせて、モニタ画面の真ん中にdivbox（トップページ）を配置させたいのです。 制作したトップページをサーバにアップロードして、色々なサイズのモニタ画面で見た時に、常にモニタ画面の真ん中に作ったトップページを配置させるのが目的です。 どなたかお知恵をおかしくださいませ。 宜しくお願いいたします。
- nishiura48
- お礼率75% (15/20)
- CSS
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
これで表示されるかな？ div{ position:absolute; top:50%; left:50%; width:600px; height:600px; margin:-300px 0 0 -300px; } 1.ボックスの左上を画面中央に絶対表示させる。 2.ボックスサイズの半分の値のネガティブマージンを指定する。 参考サイトを元に書きましたので、詳しくは参考サイトをご参照ください。
その他の回答 (1)
- amane123
- ベストアンサー率60% (6/10)
下記のコードをブラウザで見てみてください。 <style> #test{ position:absolute; background-color:#333333; top:50%; left:50%; margin-left:-300px; margin-top:-300px; width:600px; height:600px; } </style> <body> <div id="test">テスト</div> </body> 【解説】 position:absolute; ⇒ <body>に対して相対的な位置をとる。 top:50%; ⇒ <div>の位置を上からの50%の位置に配置。 left:50%; ⇒ <div>の位置を左からの50%の位置に配置。 margin-left:-300px; margin-top:-300px; ⇒ topとleftで指定した位置は<div>の箱の中心の座標なので、 width,heightの1/2分ずれていることになるのでその分位置を戻す。 といった感じです。
お礼
できました。 詳しく丁寧な回答、とても助かりました。 だいぶ悩んでたのでスッキリです。 本当にありがとうございました。
お礼
できました。 本当に困ってたので助かりました。 丁寧にサイトまで教えていただき、参考になります。 ありがとうございました。