- ベストアンサー
ページ全体を中央に表示する方法
- ページ全体を中央に表示する方法について説明します。
- 指定されたコードを使用してページ全体を中央に表示しようとしましたが、若干左に寄ってしまいます。
- body要素とmain要素のスタイルを修正することで、ページ全体を中央に配置することができます。
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- ページ全体をセンタリングできません
フルCSSでWEB作成をしていますが、ページ全体をセンタリングしたいのですが、IEで見ると右にずれてしまいます。ネットでいろいろ検索をして試してみたのですが、うまく行きません。 HTMLは <div id="centering"> <div id="wrapper"> </div> </div> で、CSSは #centering { text-align: center; width: 100%; position: absolute; margin: 0px; padding: 0px; } #wrapper { width: 900px; margin: 0px auto 0px auto; padding: 0px; text-align: left; です。 これではだめなんでしょうか。
- ベストアンサー
- CSS
- 右と左の両端に色を付けるには?
http://www.1uphp.com/con2/layout/bodycenter.html を参考に、サイトを作成しているのですが、 右と左の両端の四角の中を赤にしたい場合、どうすればいいでしょうか? 「この中にページ内容を入れます。」と書いてない部分に色を付けたいです。 BgColor #FF0000; を追加して、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { margin:0px; /* ページ全体のmargin */ padding:0px; /* ページ全体のpadding */ text-align:center; /* 下記のautoに未対応用のセンタリング */ border: 1px solid #FF0000; BgColor #FF0000; } #main { margin-left:auto; /* 左側マージンを自動的に空ける */ margin-right:auto; /* 右側マージンを自動的に空ける */ text-align:left; /* 中身を左側表示に戻す */ width:650px; /* 幅を決定する */ border: 1px solid #FF0000; } --> </style> </head> <body> <div id="main">この中にページ内容を入れます。</div> </body> </html> としてみたのですが、何も変わりません。
- ベストアンサー
- HTML
- CSSで全体をセンタリングしたい
navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ?レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか? ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------
- ベストアンサー
- CSS
- スクロールバーによって表示がズレます。
下記のようにCSSを書きました。 topとしてテーブルクラス指定した中に、areaの領域をとって内容を流し込んでいるのですが、ブラウザにスクロールバーがつく場合とつかない場合とで表示が中央からスクルーロバー分、広くなったり狭くなったりします。(IEはOKなのですが・・・) どうすれば表示がずれないようにできるでしょうか。 --------------------------------- body { margin-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 0; padding: 0; color: #333333; text-align: center; background-color: #FFFFFF; } #area { padding-top: 2px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; } table { margin: 0; padding: 0; } table.top { margin-top: 5px; margin-right: auto; margin-left: auto; margin-bottom: 0; width: 780px; text-align:center; background-color: #FFFFFF; } table.top td { text-align:left; vertical-align: top; }
- ベストアンサー
- HTML
- CSSでボックスを中央に表示させたい
CSSでボックスを中央に表示させたいのですが、 {float:left; width: 800px; heght: 100px; height: 100px; margin: auto; text-align:left;} こんな感じでできるかと思ったのですができません。 既存の質問にもあったように margin: auto; text-align:left; と入れたのですが、左寄せのままでした。
- ベストアンサー
- CSS
- スタイルシートの横並びリスト中央配置について
#Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。
- ベストアンサー
- CSS
- firefoxにおいてページ全体の配置
Firefoxでページ全体の表示を中央に配置するにはcssでどうすればいいんでしょうか? もちろん、IEでは中央なのに・・・。 body { text-align: center; margin-right: 0px; margin-left: 0px; } では間違いでしょうか??
- ベストアンサー
- HTML
- floatを使用すると中央寄せにならない
CSSについて質問があります。 floatを使って2段組のレイアウトにしたのですが、 MacのIE5.2で見ると、floatを使ったdiv(container)だけ中央寄せではなく 左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。 URL:http://fuma.xrea.jp/ /* CSSソース*/ html{height : 100%; width : 100%;} body{width : 100%; text-align : center; margin : 0px auto; padding : 0px;} #container{ margin : 0px auto; padding : 0px; width : 720px;} div#main{ text-align : left; width : 490px; margin : 0px; padding : 8px 0px; float : left;} div#side{ margin : 0px; padding-bottom : 8px; text-align : left; width : 230px; float : right;} div#copyright{ text-align : center; margin : 0px auto; padding : 10px 0px; clear : both; width : 720px;} /* HTMLソース */ <div id="container"> <div id="side">てすと</div> <div id="main">てすと</div> </div> <div id="copyright">test</div> <div align="center">を使っても中央寄せになりませんでした。 どうすれば、MacのIEでも中央寄せにできますか?
- ベストアンサー
- CSS
- ブラウザ間のCSSの表示違いにつきまして
現在、趣味のホームページを作成しているのですが、IEでは意図したとおり表示されるのですが、firefoxではCONTENT内上部(float boxの上)に隙間のようなものができてしまって困っています・・・ CSSは以下になります。 #content { width: 680px; margin: 0 10px; padding: 0; background-image: url(../img/content-back.jpg); background-repeat: repeat-y; text-align: center; overflow: auto; text-align: center; } #left { float: left; width: 456px; margin: 0; padding: 50px 0; text-align: center; } #right { float: right; width: 224px; margin: 0; padding: 50px 0; background-color: #000000; text-align: center; } #footer { height: 60px; margin: 0 10px; padding: 0; background-image: url(../img/footer-back.jpg); background-repeat: repeat-x; text-align: center; clear: both; } CONTENTを親要素として、その中にleftとrightボックスを作成しました。 なお、overflow: auto;をなくしてcontent・left・rightに高さを指定したら隙間はなくなるのですが、共に内容に準じた高さ(auto)にしたくて・・・ どなたか解る方いらしたらご教示お願いします!
- ベストアンサー
- HTML
- CSS 画像中央そろえ
スタイルシートを利用して、以下のことを実現させたいのですができません。 解決方法を探しています。 ■症状 ページ全体は左寄せ ページの中身は画像単体だったり、表があったりします。 画像は中央寄せ、表も中央寄せ、表の中身(テキスト)は左寄せにしたいのですが 以下の環境下でページ中身が左寄せになってしまいます。 ⇒Mac:IE ■CSSソース #box{ ←ページ全体 width:760px; margin: 0px; text-align:center; } .box-center { ←ページ中身 text-align:center; margin:0px auto; padding:0; } .box-red { ←ページ中身の表(外枠) background-color:#FF0000; padding:5px; margin:0px auto 20px auto; } .box-yellow { ←ページ中身の表(内側) background-color:#FFF299; line-height:150%; text-align:left; } ■HTMLソース(抜粋) <div id="box"> <div class="box-center"> <img src="~"> <div class="box-red"> <div class="box-yellow">~</div> </div> </div> </div> お分かりになる方、いらっしゃいませんでしょうか? よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
お礼
回答ありがとうございました。