22

Web サイトの次のスタイル: http://6.470.scripts.mit.edu/css_exercises/exercise4.html

<style type="text/css">
  #sponsors {
         margin:auto;
         margin-top:50px;
         overflow: hidden;
         width: auto;
         display: inline-block;
  }
  div.image img {
         margin: 3px;
         border: 1px solid #ffffff;
  }
  div.image a:hover img {
        border: 1px solid;
  }
</style>
</head>
<body>
 <h1>Sponsors of 6.470</h1>
 <div id="sponsors">
   <div class="image"><a href=""><img src="images/appian.png" width="150" height="85"></a></div>
   <div class="image"><a href=""><img src="images/dropbox.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/facebook.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/nextjump.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/palantir.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/quora.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/tripadvisor.png" width="150px" height="85px"></a></div>
   <div class="image"><a href=""><img src="images/vecna.png" width="150px" height="85px"></a></div>
  </div>
</body>

width: autoが削除された場合、#sponsorsは使用されdiv#sponsorsていても中央揃えではありませんmargin: auto。

同様に、代わりに上記の body スタイルで にtext-align: center置き換えた場合、は中央揃えにならず、ばかげています。margin: auto<h1>

何度も使用margin: autoしており、問題なくコンテンツを中央に配置できたからです。だから私を助けてください、そして私はこれに大いに感謝します。

PS：私はfirefoxを使用しましたdoctypeが、タグを使用する以外に、まだ中央に配置できませんmargin: auto。

4

10 に答える 10

12

widthまたはmarginあなたの#sponsorsIDに定義する

このように

#sponsors{
margin:0 auto; // left margin is auto, right margin is auto , top and bottom margin is 0 set
width:1000px; // define your width according to your design 
}

マージンオートの詳細

于 2013-03-29T05:31:53.770 に答える
3

使用する必要はありませんmargin: 0 auto。以下のコードを試してみてください。

div#sponsors{
    /* other css properties */ 
    /* remove display:inline-block and margin: auto */       
    width:100%;  /* instead of width: auto */
    text-align: center;

}

div.img{
    /*remove float:left */
    /* other css properties */
    display: inline-block;
}

text-align: centerタグから削除し、代わりにタグにbody渡してください。h1

于 2013-03-29T06:00:30.323 に答える
2

div に幅を指定する必要があり、マージンを 2 回指定しないでください

#sponsors {
    margin:50px auto 0 auto;
    margin-top:50px;
    overflow: hidden;
    width:160px;
    background:aqua
 }

デモ

于 2013-03-29T05:39:27.277 に答える
2

センタリングDIVするには、以下を設定する必要がありcssます。

例

#sponsors {
   margin:0px auto;
}

コメント

div の幅も設定する必要があります。

DEMO

于 2013-03-29T05:30:25.603 に答える
1

使用margin:autoするには、 を使用position:relativeし、 を定義するwidth 必要があります。ブラウザとして想像してみてください。その幅がわからない場合、「ボックス」(div など) をどのように中央揃えにしますか? ;)

お役に立てれば幸いです

修正：クリストファー・マーシャルが言ったようにposition:relative、幅を指定する必要はありません。

于 2013-03-29T05:29:52.373 に答える
0

任意の div u がマージン自動の中央にある場合、常にこの div 幅は修正されます ......

#sponsors {
width:XXpx;
margin:50px auto 0;
overflow: hidden;
display: inline-block;
 }
于 2013-03-29T05:30:09.473 に答える