2

ページはこちら： https ://gentle-day-3026.herokuapp.com/

css ファイルは次のようになります。

https://gentle-day-3026.herokuapp.com/stylesheets/base.css もう 1 つは、reset.css を使用して base.css を置き換えることです (新しいユーザーには 2 つのハイパーリンクのみが許可されます)。

次のようなメソッドを含めて、何度か変更してみてください。

<body> 
 <div id="divMain"> 
  ... 
 </div> 
</body> 


body 
{ 
 margin: 0; 
 padding: 0; 
 text-align: center; 
} 
#divMain
{ 
 margin: 0 auto; 
 padding: 0; 
 width: 1024px; 
 text-align: left; 
}

しかし、うまくいきませんでした。ご協力ありがとうございました！

私は非常に単純なhtmlでそれをテストします:

<!DOCTYPE html>
  <head>
   <link rel="stylesheet" href="stylesheets/base.css" media="Screen" type="text/css" />
  </head>
  <body>
  <div id="divMain">
     <h1> hello </h1>
  </div>
 </body>
</html>

それでもうまくいきませんでした！

4

8 に答える 8

4

現在のページでbodyは、 の固定幅があり720pxます。これを削除します。div次に、 のすぐ内側にある最も外側の固定幅を設定しますbody。さらに、これdivに のマージンを与えます。これ0 autoにより、水平方向の中央に配置されます。

于 2012-06-07T08:10:52.850 に答える
2

あなたがしたことは問題ありません。しかし、あなたは に幅を与えましたbody。widthそこから属性を削除します。この CSS を試してみてください。

body {
    color: #999999;
    font: 14px/1.5em "Lucida Grande",Arial,sans-serif;
    margin: 20px;
    width: auto;
}

ここに画像の説明を入力

base.css行番号を参照してください。8width: 720px;体も同じ！また、<div align="center">それを に変更して<div class="center">、css を として指定し.center {width: 720px; margin: auto;}ます。これを試して、私たちに知らせてください。

最後に、これを持っている必要があります：

.center {width: 720px; margin: auto;}

<div class="center">
于 2012-06-07T08:12:22.683 に答える
1

<div>ボディの幅を 100% に設定し、任意のサイズ (例: 720px) に設定し、マージンを 0 autoに設定する必要があります。

于 2012-06-07T08:12:34.260 に答える
0 
body{
  width: 100%;
  height: 100%;
}

.divMain{
  width: 720px;
  margin: 0 auto;
}

それはあなたを助けるかもしれません。このスタイルをコードに追加してみてください。

于 2012-06-07T08:36:00.857 に答える
0

ここに 2 つの問題があります。

  1. <body> のマージンを 0 に設定します (上記のインライン css)。さらに、<body> の幅はわずか 720px (base.css、8 行目) で、ほとんどのデスクトップ ビューポートの幅よりも小さいです。その結果、<body> はビューポートの左側にスナップし、margin-left は 0 になり、右側に十分なスペースが確保されます。<body> が左に配置されていると、その子 (#divMain など) が中央に配置されているように見えない可能性があります。できることは、 を使用して <body> を中央に配置するかmargin: 20px auto、<body> の幅を 100% に設定してビューポート全体を埋めることです。

  2. 子 #divMain の幅は、本体の幅よりも大きくなっています。#divMain の幅を 720px より小さく設定する必要があります (例: 500px) - 子を親の中で水平方向に中央揃えにする唯一の方法はmargin:0 auto、親の幅を大きくすることです。もちろん、#divMain の幅を 1024px より小さくするつもりはなかったと思いますので、<body> の幅を 100% に設定することをお勧めします。これにより、その幅が #divMain の幅よりも大きくなることがほぼ保証されます。

つまり、次のいずれかを使用できます。

body{width:720px;margin:20px auto;} #divMain{width:500px;margin:0 auto;}

また

body{width:100%;} #divMain{width:1024px;margin:0 auto;}

それが役立つことを願っています。

于 2012-06-07T08:47:26.050 に答える
0

HTML

<body>
<div class="div-body-width">
....
</div>
</body>

CSS

body {
    margin: 0px;
    padding: 0px;

}

/*Insert here your width*/

.div-body-width {
    width: 1024px;  
    margin: 0 auto;
}
于 2012-06-07T09:21:09.083 に答える
0

あなたが投稿したサンプルコードは、#divMain を中央 (水平) に揃えるために完全に機能します...

サイトに投稿したコードを見ると、要素に固定幅を定義しているように見えますbody( の 12 行目を参照base.css)。この固定幅を削除し、正しい幅をラッパーdiv(現在は を使用して設定align="center") に移動すると、問題が解決するはずです。

于 2012-06-07T08:12:34.587 に答える
-1

body のコンテンツを div でラップします。

<body>
    <div id="page">
      ...
    </div>
</body>

次に、あなたのcssで：

#page {
    margin: auto;
}
于 2012-06-07T08:12:59.637 に答える