- ベストアンサー
ＨＴＭＬ、ＣＳＳの質問です
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分ずれていることになるのでその分位置を戻す。 といった感じです。
お礼
できました。 詳しく丁寧な回答、とても助かりました。 だいぶ悩んでたのでスッキリです。 本当にありがとうございました。
関連するQ&A
- HTML.CSSの質問です
HTML,CSSを勉強している初心者です。 ＣＳＳでの、ブロックレベル要素のセンタリグについての質問です。 縦のセンタリングはどうすればいいのでしょうか？ 横のセンタリングは、左右のマージンをautoにすると上手くいくのですが、上下のマージンにautoを設定してもセンタリングされません。 縦６００px、横６００pxのdivbox（トップページ)を作って、bodyのなかで縦横ともにセンタリングさせて、モニタ画面の真ん中にdivbox（トップページ）を配置させたいのです。 制作したトップページをサーバにアップロードして、色々なサイズのモニタ画面で見た時に、常にモニタ画面の真ん中に作ったトップページを配置させるのが目的です。 どなたかお知恵をおかしくださいませ。 宜しくお願いいたします。
- 締切済み
- HTML
- css（スタイルシート）について質問
最近cssをはじめたのですが、いまいち構造が理解できません。 甘えて申し訳ありませんが、縦横60pxが9枚あります。 この写真を横3枚縦3枚（3行3列）で綺麗にＨＰ内の中心に収まるように全体をセンタリングしたいのですが、お詳しい方アドバイスを頂戴願えますでしょうか。 お願いします。（css+xhtmlでお願いします。）
- ベストアンサー
- HTML
- CSSについて
こんにちは。 現在、CSSを使用して、Webページを作成しております。 先日、ページの幅を、750pxにし、センタリングしたのですが、 長い文章を入力すると、改行がされず、横スクロールになってしまいます。 CSSは、こちらです。↓ #hogehoge { margin:0 auto; width:750px; } 最後にmargin-left:auto; margin-right:auto;をつけてみたのですが、やはり駄目です。 HTMLは、こちらです。 <html> | |（途中略） <div id="hogehoge"> 長い文章～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ </div> </body> </html> どなたか横スクロールをせずに、幅の限界まで来たときに自動改行されるようなCSSを教えていただければ幸いです。 ご面倒だとは思いますが、お願いします。
- ベストアンサー
- CSS
- cssのことでわからないことがあります。
こんにちわ。 私はＦＣ２ブログを使って自作テンプレートを作っているのですが、テーブルで組んだ一つのコンテンツを真ん中に配置したいのですが、cssでmargin-raight:auto、margin-left:auto;にしても真ん中に配置されません。 margin-left:300px;と入力すれば左に300pxの余白を作ることはできるのですが・・・ 何故なんでしょう？ 後HTML上で<div align="center">～</div> で囲むと真ん中に配置されます。 私としてはcssでレイアウト全てを管理したいのでお願い致します。
- ベストアンサー
- ブログ
- CSSで横の段組-センタリングするには？
CSSで横の段組をし、センタリングしたいのですが、 横の段組のために「float: left;」を使うと、 「margin:0px auto;」と指定しても左寄りになってしまいます。 「float: left;」を消せばセンタリングできるのですが、 そうすると横の段組ができなくなって困っています。 何か単純な間違いをしているのだと思うのですが、ご助言ください。
- ベストアンサー
- HTML
- 【css】marginについて質問です。
現在Webサイト構築をしています。いきなり躓きました。コードを見てください。 （一部だけ抜粋しています） 【cssコード】 #container_all{ width:920px; height:520px; margin:0 auto; padding:0; } #container{ width:900px; height:500px; margin:10px; padding:0; } 【XHTMLコード】 <div id=container_all> <div id=container> </div> <div> このような場合、#container_allの中に#containerがマージン10pxでちょうど中心に収まるものかと思ってましたが、見事にマージンのtopが効いてませんでした。 marginは効かないのでしょうか？教えてください。
- 締切済み
- デザイナー・クリエイティブ職
- CSSでの中央揃え
CSSでの中央揃え googleで表示させる為にCSSでページレイアウトとしているのですが、ページ全体（云わばbody）が左寄りのままであり、画面中央に配置することができません。 様々な質問を見ていると「text-align:center」はIEのバグでIEでしか表示されないとの事で・・・ マージンを変更し、左から右のみに動かしていましたがそれではウィンドウを縮小させたときに右側のマージンを変えていないので、間隔のあいた左側が出てしまいスクロールするはめになります（しかも右側はピッタリレイアウト面がウインドウ端についている） 右側のマージンの値も変更はしてみましたが、左側のようにいかずに命令自体スルーされます width:700px; margin-right:auto; margin-left:auto; } ↑コレとか 説明があやふやすぎて分かりにくい事は謝罪しますが、心当たりがある方がいましたらご教授お願いします
- 締切済み
- CSS
- [CSS]marginとpaddingについて
ブログのCSSを編集しています。 marginとpaddingの違いがいまいち分かっていなかったので、いろいろなCSS講座サイトを見て回ったのですが、少し混乱して来ました…。 自分なりに以下のような結論を出したのですが、何か問題はありますでしょうか。 ■marginとpaddingは要素にボーダー・背景色を使用しない限り、表示に違いはない。 ■marginはIE6などでレイアウトが崩れる場合や、ブラウザによって相殺が起きたり起きなかったりする場合もあるので、余白は全てpaddingで指定する。 ■ページ全体の設定はデフォルトで margin:0px と padding:0px とし、余白のいらない要素には何も記述しない。(CSSをスッキリさせたいので) ■ページ全体のセンタリングは、 margin:0px auto とする。(どのサイズのスクリーンで見ても、真ん中にくるようにしたいので) ネガティブマージンは使用しません。 また、各エリアやテキストに、ボーダーと背景色は使用していません。 表示に違いがないのであれば、出来れば余白は全てpaddingに統一したいのです。(統一した方が気持ち良いので) この解釈で合っているか、教えてもらえると助かります。 よろしくお願いいたします。
- ベストアンサー
- HTML
- ブロック要素を横方向にセンタリング
ブロック要素をCSSで縦横共にセンタリングしたいです。 横方向のセンタリングはできたのですが、縦方向のやり方がわかりません。 縦方向をセンタリングするにはどのような記述をすれば良いのでしょうか？ アドバイスお願いいたします。
- ベストアンサー
- CSS
- HTML、CSSのチェックをお願いします。
独学でGoogleトップページのデザインを真似てみました。 ブラウザの表示領域の上部に固定されたヘッダーとセンタリングされたコンテンツといった形にしています。 自分で真似たので、表示される結果としてはイメージ通りではあるのですが 実際、回りくどい方法をとっていないか？もっと適切な方法がるのでは？といった事が分からないので チェックして頂きたいと思います。 CSSに関しては外部ファイルへ記述します。 以下のソースになります。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- body{ margin: 0; /* ヘッダーをぴったり上部付けたいので */ } #header{ color: #DDD; background-color: black; position: fixed; width: 100%; height: 50px; /* ヘッダー内に高さ50pxの画像を配置したい為 */ z-index: 100; /* wrapperより上にかぶってほしい為。数値自体は適当 */ top: 0; } #wrapper{ width: 800px; margin: 0 auto; background-color: #dbcfc3; margin-top: 50px; height: 1300px; /* 縦スクロールを表示したい為 */ } #header h1, #header ol, #header li,#header img{ margin: 0; font-size: 17px; float: left; } #header ol{ padding: 0; list-style-type: none; } #header li{ margin-left: 5px; } #header a:visited, #header a:link{ color: #DDD; } --> </style> </head> <body> <div id="header"> <img src="" alt="てすと"><!-- srcには高さ50pxの画像を使用予定 --> <h1>あいうえお</h1><!-- SEO的にH1を使った方がいいとの記述が多い為。サイトタイトルを記入予定 --> <div> <ol> <li><a href="http://www.google.co.jp">google</a></li> <li><a href="http://www.yahoo.co.jp">yahoo</a></li> </ol> </div> </div> <div id="wrapper"> content </div> </body> </html> どんな些細な事でも構わないので、よろしくお願いします。
- 締切済み
- HTML
お礼
できました。 本当に困ってたので助かりました。 丁寧にサイトまで教えていただき、参考になります。 ありがとうございました。