ベストアンサー

CSSで全体を中央寄せ

2004/12/23 00:13

スタイルシートでfloatを使ってコメント部分（左）とカテゴリ部分（右）を段組にし、ブログのテンプレートを作っていますが、本体が中央寄せできません。 body{margin-top:0px;margin-right:auto;margin-left:auto;} としていますが、左端に表示されてしまいます。コメント（左）とカテゴリ（右）に{margin-right:auto;margin-left:auto;}を入れても左に寄ったままです。横幅をそれぞれpixで指定していますが、この方法に問題があるのでしょうか。ブラウザはIE6以上で確認しています。よろしくお願いします。

noname132
お礼率68% (22/32)

CSS
回答数1
ありがとう数4

回答全件

ベストアンサー

残念ながら、IEはmargin:autoによる中央寄せに対応していませ…

2004/12/23 13:58

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

flowermaze
ベストアンサー率56% (159/282)

2004/12/23 13:58 回答No.1

残念ながら、IEはmargin:autoによる中央寄せに対応していません。ページ全体をdivでくくり、bodyにtext-align:center、全体をくくったdivにtext-align: centerを指定することで、IEでもご希望の表示ができるはずです。

質問者

お礼 2004/12/23 21:33

IEではmargin:autobodyに対応していないとは知りませんでいた。いろいろ試してもできなかったのはそのせいだったんですね。text-align:centerをしたら、エントリー全体が中央寄せになってしまったのですが、それぞれ左寄せに指定したら、本体だけ中央寄せにできました。とても参考になるご回答ありがとうございました。

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

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
cssで、全体を中央寄せ、文字は左寄せにする方法
CSSで、全体を中央寄せにしつつ、全ての文字を左寄せにする方法を教えてください。 bodyにtext-align: centerを設定し、 #outline{ width:1200px; margin-right:auto; margin-left:auto; text-align:left; } .content{ float:left; width: 1200px; } と書き、<div id="outline"><div class="content">で全体を囲みました。すると、大方できたのですが、h要素のみずれてしまいます。（h1は全体に対する左寄せ、h2は全体に対する中央寄せとなってしまいました・・・） h要素は色とフォントサイズを指定したのみです。 CSSについて自体あまり詳しくないので、なぜこうなってしまっているのかわかりません。どのようにすれば、他と同じく中央左寄せにすることができるでしょうか？よろしくお願いいたします。
- ベストアンサー
- CSS
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で横の段組-センタリングするには？
CSSで横の段組をし、センタリングしたいのですが、横の段組のために「float: left;」を使うと、「margin:0px auto;」と指定しても左寄りになってしまいます。「float: left;」を消せばセンタリングできるのですが、そうすると横の段組ができなくなって困っています。何か単純な間違いをしているのだと思うのですが、ご助言ください。
- ベストアンサー
- HTML
float:leftを使用して全体を中央寄せしたい
html勉強中のものです。 float:leftを使用したdivすべてbody全体の中央寄せにしたいです。下記のソースから教えて下さい。 html -------------- <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="shift_jis"> <title>Director Blog</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <header> <hgroup> <h1 id="header">Why not?</h1> </hgroup> <ul class="header"> <li>menu</li> <li>info</li> <li>list</li> </ul> </header> <div class="float left"> <div class="cc"><p><img src="images/Dragon+Ash+02_02.jpg" width="200" height="150"> </p> <h1 class="float left"> Miyuki Yamanaka</h1> <p class="float left"> Photographing and questioning. Miyuki is a Japanese photographer. Her inspiration comes from the mundane scenes, which often relates to nostalgia and obsolescence. She explores the</p> </div> </body> </html> -------------- css -------------- charset "utf-8"; /* ---------------------------------------------- This style definition is initiarize. ------------------------------------------------- */ body , div , header, dl , dt , dd , ul , ol , li , h1 , h2 , h3 , h4 , h5 , h6 , pre , form , fieldset , input , textarea , p , blockquote , th , td { margin-right: 0 auto; margin-left: 0 auto; padding: 0 auto; } div.float left{ float:left; } div.cc { width:200px; background: #FAFAD2; float: border-style: none; margin-right: auto; margin-left: auto; padding: 20px; position: relative; overflow: hidden; layout-grid-line:200px; border-radius: 5px; -webkit-box-shadow: 1px 1px 3px #000; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; } -------------- よろしくお願いします！
- 締切済み
- CSS
css box　ieだけ中央寄せ出来ない
サイトを作っています。CSSのBOXを使って、メイン部分を構成しているのですが、IEだけ中央寄せされません。どのようにすれば解決できますか？できれば<div style="text-align:center">内容</div>は使いたくないです。 <style type="text/css">  </style> <div class="mainbox"> 内容 </div> 質問に関係ありませんがクローム、オペラ、モジラでは正常に表示できるのになぜIEだけはちゃんと働かないのでしょうか？　IE迷惑ですｗ
- ベストアンサー
- 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
IEで中央寄せにしたい
<html> <head> <title>test</title> <style type="text/css">  </style> </head> <body> <DIV style=background:red;> test</DIV> </body> </html> これでスレイプニルだとちゃんと中央寄せになるのですがＩＥ９だと横画面いっぱいに広がってしまいます。ＩＥでも指定した幅で表示させる方法はありますか？
- ベストアンサー
- HTML
中央寄せが出来ません。
下記の様な構成で中央寄せが出来ません。何がいけないのでしょうか？アドバイスお願い致します。 index.html <body> <div id="hedderdiv"> <div id="hedder"> </div> <div id="buttomgrp"> </div> </div> </body> CSSファイル #hedderdiv { width: 800px; height: 500px; margin: 0 auto; } #hedder { width: 800px; height: 280px; background-color:#3F3; position:absolute; top: 0px; left: 0px; margin: 0 auto; } #buttomgrp { width: 650px; height: 200px; background-color:#C63; position:absolute; top:200px; left:50px; margin: 0 auto; }
- ベストアンサー
- 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