センタリングコンテンツの問題

コンテンツを正しくセンタリングするために、次のページを取得するために必要なことを教えてもらえますか？センタリングコンテンツの問題

私は、ここから先に一日中使用何か他のもので動作するようにしようとしてきた：

#divWrapper {margin:0 auto; text-align:center;} 
#div {text-align:left;}

しかし、これは私のために働いていません。私は助けを必要とページの一つはここにある：

出典

2012-01-16 Scott Rowley

'＃divWrapper'に幅を追加する必要があります。 width 'marginなし：0 auto;'動作しません。 – Virendra

#main-inner { 
    position: relative; 
    width: 960px; 
    border-top: 3px solid #DADADA; 
    margin: 20px auto 0; 
    overflow:auto; 
    zoom:1; 
}

これを試してみてください。既存のものをこれに置き換えてください。コンテンツを集中化する必要があります。

出典

2012-01-16 05:22:57 Joseph

完璧！あなたと良い夜をありがとう！ ;） –

センタリング時に注意する点：1.）「margin：x auto x」メソッドを使用してコンテナを中央揃えにする場合、コンテナの幅はパーセントではありません。2）親の幅は必要ありませんが、 3）コンテナはブロックレベルの要素でなければならない。4）浮動小数点数は必要ない。フローティングアイテムが含まれているので、コンテナのベースラインを調整するために 'zoom'と' overflow'が追加されました。 – Joseph

よろしくお願いします。私はちょうどCSSを頻繁に使用し始めているので、私は時々迷っています;） –

\それは幅を必要とします：

を編集さは、私はベッドにオフに向かうことができる前に、私はちょうどこれが固定取得しようとしている、任意の助けをありがとう！正しく働く

出典

2012-01-16 05:09:54 Philip

.newcontentは100％幅を使用するために100％ –

の幅を持っています。余白をすべて適用する必要があります。真の幅なしで計算することは不可能です。 10％のマージンで100％のマージンが適用されます – Philip

Philip、回答ありがとう、使用している実際のライブコードをどのように操作する必要があるか教えてください。私はChromes Developerツールを使ってさまざまなことを試していますが、何も助けにはなりません。 –

#divWrapperの幅を指定します。デフォルトでは、幅は包含要素まで拡大されます。そのため、中心に配置されている外観を作成するには、その幅はその要素を含む幅より小さくする必要があります。あなたのCSSでの入力ミスがあり enter image description here ：

出典

2012-01-16 05:10:50 kinakuta

この#divWrapper {margin:0 auto; text-align:center;width:960px}

#div {text-align:left;width:500px}

編集をお試しください。この更新されたCSSのmargin-innerの範囲を確認してください。& margin-inner-right。それはあなたがマージンが自動的に自分自身を配置することができ、そこから一定の幅を提供する場合にのみ、margin:0 autoで要素をセンタリングすることができ、あなたの問題

#main-inner { 
     float:left; 
     position:relative; 
     width:100%; 
     border-top:3px solid #dadada; 
     margin-top:20px; 
     margin-right:auto; 
     margin-left:auto; 
} 


#main-inner-right { 

     position:relative; 
     width:640px; 
     text-align:left; 
     margin-top:20px; 
     margin-right:auto; 
     margin-left:auto; 
}

出典

2012-01-16 05:12:02

私は実際に私のページにdivWrapperと#divを使用していません。私はすでにそこにあるものを微調整しようとしています。あなたがライブコードを見て、私が微調整する必要があるものを教えてもらえますか？応答していただきありがとうございます。 –

@Scott - このページでは、コンテンツラッパーに960ピクセルの固定幅が使用されています。変動幅の錯覚は、100％幅を生じる最上位のラッパー要素の背景画像と自動マージンを繰り返すことによって与えられます。 –

更新された返信を確認してください。それがあなたを助けたら答えとしてマークしてください。 Damien –

を修正します。だからあなたのラッパーに固定を追加し、それは動作するはずです。

出典

2012-01-16 05:12:10

また、text-align：center;を指定する必要があります。実際のdivの内容を中央に揃えたい場合

出典

2012-01-16 05:12:14

センタリングコンテンツの問題

答えて

関連する問題