- ベストアンサー
CSSでウィンドウの真ん中にボックスを表示させる方法
固定したサイズのボックスでWebページ（例：760×500）を、 つくり、ユーザーのウィンドウサイズに応じて 常に画面の真ん中に表示させたいのです。 左右を真ん中にするのは、 margin-right:auto; margin-left:auto; だと思うのですが、垂直位置の上下余白を同じに する方法が分かりません。 質問の意味が分かりにくいかもしれませんので 不明点があれば補足します。 よろしくお願いします。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- コンテンツを入れるboxを上下左右ともに真ん中にしたい
コンテンツを入れるboxを上下左右ともに、スタイルシートで真ん中に設置する方法を知っていたら教えてください。 左右の場合だと「margin:0 auto」や「text-align:center」などありますが、上下の場合はどうすればいいのでしょう？ 詳しくは図を見て頂けれるとイメージつきやすいかもしれません。 よろしくお願いします。
- ベストアンサー
- HTML
- 並んだ２つのfloatボックス、片方を固定位置にしたい
floatでボックスを２つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。 現在、このfloatの２つのボックスは、大きなボックスで囲んでおり、 topから160pxの余白をとっています。 また、この大きなボックスは、常にセンターにある状態です。 ・トップから常に160pxのマージンが欲しい ・左側の余白は、ブラウザの大きさに寄ってかわる（センタリングの為） ・右のボックスは自由に動く。 この状況で、左のメニューだけを固定することは可能でしょうか。 教えてください。 現在ソースは下記のようにしております。 【HTML】 <div id="container"> <div id="gNavi"> 固定したいメニューBox </div> <div id="main"> スクロールするぐらいの長文Box </div> </div> 【CSS】 * { margin:0 ; padding:0; } body { text-align:center; } #container { width:894px; margin:160px auto 65px auto; } #gNavi { position:fixed; float:left; top:160px; left:auto; width:175px; } #main { float:left; width:716px; margin:0 0 0 2px; text-align:left; overflow:auto; }
- ベストアンサー
- CSS
- cssのことでわからないことがあります。
こんにちわ。 私はＦＣ２ブログを使って自作テンプレートを作っているのですが、テーブルで組んだ一つのコンテンツを真ん中に配置したいのですが、cssでmargin-raight:auto、margin-left:auto;にしても真ん中に配置されません。 margin-left:300px;と入力すれば左に300pxの余白を作ることはできるのですが・・・ 何故なんでしょう？ 後HTML上で<div align="center">～</div> で囲むと真ん中に配置されます。 私としてはcssでレイアウト全てを管理したいのでお願い致します。
- ベストアンサー
- ブログ
- CSSでボックスを中央に表示させたい
CSSでボックスを中央に表示させたいのですが、 {float:left; width: 800px; heght: 100px; height: 100px; margin: auto; text-align:left;} こんな感じでできるかと思ったのですができません。 既存の質問にもあったように margin: auto; text-align:left; と入れたのですが、左寄せのままでした。
- ベストアンサー
- CSS
- フッターの回り込みを防ぐ方法を教えてください（ＣＳＳ）
ブラウザ：ＩＥ７ 左右の二段組みで、左に navi ボックス、右に content ボックスの場合 div#content {float: right; width: 100%; margin-left: -150px; margin-right: auto} div#navi {float: left; width: 150px} div#footer {clear: both} としたのですが、フッターが navi の下に回り込んでしまいます。 {clear: both} は navi の幅 150px の中だけで float が clear されているだけです。 フッターが回り込まないようにするには、どうしたら良いか分かりません。 よろしくお願いいたします。
- 締切済み
- HTML
- コマンドボタンをブラウザの真ん中に表示さいたいので
コマンドボタンをブラウザの真ん中に表示さいたいのですが <html> <head> <title>test</title> <style type="text/css"> <!-- div.div_center { margin-left: auto; margin-right: auto; } --> </style> </head> <body> <div class="div_center"> <button type="button" onclick="window.open('https://www.google.co.jp','_blank');">googleで検索</button> </div> </body> </html> これでは表示されません。 margin-left: auto; margin-right: auto; これは間違ってますか？
- ベストアンサー
- CSS
- CSSによるセンターよせについて
<div> <p> 真ん中に寄せたいコンテンツ </p> </div> のように</p>部分を<div>の真ん中に寄せたい場合、 div { width:400px; } div p{ margin-left:auto; margin-right:auto; } で実現できるとおもうのですがこれだとmargin: autoの利かない IE6では真ん中によりません。 そこで、IE6用に div { width:400px; text-algin: center; } div p{ margin-left:auto; margin-right:auto; } と text-algin:center を施すわけですが 複数のブラウザに対応させようとおもったら、 常にtext-alginとmarginで２パターンのセンター寄せの 記述をしないといけないのでしょうか。 もしくは、 <table algin='center'><tr><td> <p> 真ん中に寄せたいコンテンツ </p> </td></tr></table> のようにテーブルを使わないといけないのでしょうか。 もっとシンプルにいろんなブラウザに対応したセンター寄せ方法があれば アドバイスお願いします。
- ベストアンサー
- HTML
- Firefoxで真ん中に表示されない
こんにちはCSSでの疑問なんですが下記のように コードを書いて、CSSで"H"のボックスを"F"のボックスの真ん中に 表示されるようにしたいのですが、IE6では表示されるのですが Firefox2では左右は真ん中にあるのですが、上下が動きません。 ご教授おねがいします。 <body> <div id="F"> <div id="H"> </div> </div> </body> #F { background: #000000; height: 200px; width: 200px; } #H { background: #33CCCC; height: 100px; width: 100px; margin: 50px auto 0px; }
- 締切済み
- CSS
- cssで全体をセンターにする場合、firefoxでうまくいきません。
firefoxのセンタリングについて質問です。 margin-right: auto; margin-left: auto; などでcenterにすることは、皆様の回答例でわかったのですが、これだと全体の幅が固定出ないときかない、widthを入れないといけないようにおもいます。 現在は、 table{ margin-right: auto; margin-left: auto; } のようにして対応していますが、できればレイアウトにテーブルは避けたいところです。 幅が可変でセンターにしたい場合どのようにすればよいのでしょうか。
- 締切済み
- CSS
- WordPress レスポンシブテーマのCSS
http://atsumare.wp.xdomain.jp/ 上記のURLでWordPressを使ってレスポンシブデザインの自作テーマを構築中です。 クラス「glay」でくくったボックスがスマホだと本文に食い込んでしまって困っています。 下記のものがスマホ用スタイルシートです。 /**************************************** スマホ用 ****************************************/ @media screen and (max-width:640px){ #main-1 { max-width: 100%; width: 100%; } /* ページヘッダー */ body.home header { background-size:cover; background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg"); width:100%; height:200px; } header img{ background-size:cover; display:inline-block; margin-left:auto; margin-right:auto; } h1 { position:absolute; top:0; left:0; margin-left:50px; margin-top:100px; color:#fff; font-size:24pt; } header img { background-size:cover; /* width:640px; height:200px; */ } .right-dw { display:inline-block; position:relative; width:100%; float:left; } header nav { display: none; } /* コンテンツエリア */ article { width:100%; display:block; padding-left: 5px; padding-right: 5px; box-sizing: border-box; } img { max-width:100%; height:auto; margin: 5px 5px 5px 5px; float:left; background-size:cover; } .right-dw { clear:both; display:block; position:relative; width:100%; height:auto; float:left; } .glay { border:dotted 2px #696969; display:block; color:#696969; padding:2px; margin:15px 15px 15px 15px; position:absolute; } /* フッターエリア */ footer { max-width:100%; width:500px; display:block; text-align:center; margin-left:auto; margin-right:auto; } .footer { width:130px; display:inline-block; text-align:left; color: #000; font-size: 10pt; margin-left:auto; margin-right:auto; } small { font-size:10pt; } } どなたかご教示ください。
- 締切済み
- CSS
お礼
ありがとうございます。 教えてくださった方法でやったらうまくいきました！ どこを探しても見つからなかったので 助かりました。