2012-03-01 8 views
1

を中央に配置されないだろう、私はthisを読んで、このコードを書いた:メイン最も外側のdivが

.wholePageDivForCentering 
    { 
     width: 80%; 
     white-space: nowrap; 
     display:inline-block; 
     margin: 0 auto; 
     border: 4px solid red; 

     /* other stuff I tried........*/ 
     /*padding-left: 10%;*/ 
     /*margin-left: 10%;*/ 
     /*padding-right: 10%;*/ 
     /*margin-right: 10%;*/ 

    } 



    <body> 
    <div class="wholePageDivForCentering"> 
     <h2>Hello from the page</h2> 
     <!-- stuff such as 2 nested divs contained text labels, and a small image --> 
    </div> 
    </body> 

私は理由のための私の最も外側のdivの周りにソリッドの赤、4ピクセルの境界線を入れました。

その最も外側のdivの周りの太い赤い枠線の矩形が、 の横の中心にそのページにあるかどうかを確認したいと思っていました。

IT DID NOT
EDIT:ブラウザが最大化されると、私の最も外側のdivは左にとどまります。

私は複数のことを試みました。からの助言を使用して、ブラウザ・ウィンドウ

  • を の80%を取るために、この最も外側のdiv、太い赤枠のものを教えて

    • :私の意見では、私のことができるようになり上記のSO投稿(again、here) - これを の最外のdivは常にブラウザウィンドウの80%を占めますが、ブラウザウィンドウではを真ん中にします。

    私個人的には?私はマージンが10%、マージンが10%がマージンが10%、それ以上はマージンが良いと思う。

    私が望むものを見るには、http://sfbay.craigslist.org/ にCraigslistを開き、ブラウザウィンドウ(CLサイトのメインページではなく、メインページ)を最大化します。

    ブラウザを最大化すると、Craiglistのメインの ページの左右の空白の横幅が同じになります。メインページの列は水平方向に中央に です。

    (おそらく)このページには、メインページにある のすべてを囲む中心のdivがあるためです。

    どうすればよいですか?

  • +2

    インラインブロックを表示するように設定されているのはなぜですか? –

    +0

    インラインブロックをコメントアウトして、センタリングを変更しませんでした。最も外側のdivの2つのネストされたdivは、(横方向に)隣り合っている必要があります。インラインブロックがないと、..... oh waidaminit ....... – wantTheBest

    +0

    私はインラインブロックをコメントアウトすると、2つのネストされたdivが縦に積み重なると言っていました。しかし、私はちょうどインラインブロックをコメントアウトして、ゴットダングネストされたdivは、横に並んでいなければなりません。そして、赤い国境の党首は、今すぐページの真っ直ぐ中央に位置しています。シャックス・ダン・シミー・ドゥ・ハッ。ありがとう。私は多くの順列を試しましたが、マージンを追加する前にすべてを行いました:0 auto; SOの記事から。それをやったと思う、私は願っています。 – wantTheBest

    答えて

    4

    display:inline-blockを取り出すとうまくいくはずです。私もそのdiv要素のidの代わりにクラスを使用することをお勧めしhttp://jsfiddle.net/zKm6b/

    :ここ

    はJsfiddle([実行]をクリックします)です。私はそれが助けて欲しい!

    +0

    ご協力いただきありがとうございます! – wantTheBest

    3

    なぜあなたは設定display: inline-blockですか? displayがブロックの場合(デフォルトではdivなので、表示を削除して問題を解決することができます)に動作します。

    +0

    ご協力いただきありがとうございます! – wantTheBest

    関連する問題