margin: auto ist nicht zentrieren

In der folgenden style von der website: 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>

wenn die width: auto entfernt von #sponsors dann die div#sponsors ist nicht zentriert ausgerichtet, obwohl margin: auto verwendet wird.

Ebenso, wenn statt text-align: center wird ersetzt durch margin: auto im Körper-Stil, oben, dann der <h1> werden nicht zentriert ausgerichtet wird, das ist absurd;

weil ich verwendet haben margin: auto eine Menge Zeit und es war in der Lage, um die Mitte der Inhalt, ohne jede Frage. Somit helfen Sie mir, und ich Schätze dies sehr.

PS: ich benutzt firefox und außerdem verwenden die doctype tag-es ist immer noch nicht in der Lage, zum Zentrum mit margin: auto.

Das element mit id=sponsors ist zentriert. Es funktioniert einfach nicht egal, denn es hat 100% Breite (wie div Elemente haben standardmäßig). Sie müssen festlegen, was genau Sie haben möchten, zentriert und in welchem Sinn (was sollte es wirklich aussieht).
siehe meine Antwort, die ich Hinzugefügt haben, die demo zu

InformationsquelleAutor Md. Reazul Karim | 2013-03-29

  1. 6

    Definieren width oder margin auf Ihre #sponsors ID

    als wie diese

    #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 
}

    Mehr über margin-auto

    Gut. Jeder Antwort scheint richtig zu sein. Ich wähle den ersten, die als offizielle Antwort.
    Warum funktioniert CSS Breite der Arbeit, aber wenn Sie die width - /height-html-Attribute, funktioniert es nicht?

    InformationsquelleAutor Rohit Azad

  2. 2

    Zur Zentrierung DIV müssen Sie css für unten.

    Beispiel

    #sponsors {
   margin:0px auto;
}

    Kommentar

    Müssen Sie auch legen Sie die Breite für div.

    DEMO

    Das ist richtig, Sie benötigen eine Breite gesetzt.
    Kommentar bitte
    bitte sagen Sie mir, warum Sie nach unten gestimmt...
    Ja, das tun Sie. @DanielImms jsfiddle.net/JLryj gegen jsfiddle.net/JLryj/1
    Ich von Ihnen positiv bewertet werden, Sir.

    InformationsquelleAutor Dipesh Parmar

  3. 2

    Müssen Sie angeben, Breite, div und gib nicht Marge zweimal

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

    DEMO

    InformationsquelleAutor Sowmya

  4. 2

    Keine Notwendigkeit der Verwendung margin: 0 auto. Versuchen Sie, den untenstehenden code, es funktioniert:

    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;
}

    Entfernen text-align: center aus body tag und geben h1 - tag statt.

    InformationsquelleAutor Mr_Green

  5. 0

    Wenn alle div u wollen im Zentrum für Marge auto, immer dieses div die Breite ist fix ......

    #sponsors {
width:XXpx;
margin:50px auto 0;
overflow: hidden;
display: inline-block;
 }
    Sie überschreiben Ihre erste Marge mit Ihrem zweiten Anruf, das ist unnötig.
    In deinem oberen code u wollen margin-top:50px;.......

    InformationsquelleAutor Akhil Thesiya

  6. 0

    Verwenden margin:auto Sie verwenden sollten position:relative, oh, und definieren Sie einen width
    Stellen Sie sich vor, wie ein browser, wie du das center eine "box" (wie div), wenn Sie nicht wissen, was die Breite? 😉

    Ich hoffe, dass ich Ihnen helfen

    Korrektur: als Christopher Marshall, sagte, dass Sie nicht brauchen position:relative aber geben Sie die Breite.

    Sie brauchen nicht position:relative für die Zentrierung mit margin.
    yep, ich bin falsch über position ich Eilte, es zu erwähnen, in der Regel definiere ich position:relative für alle element mit meine css-reset,

    InformationsquelleAutor Éderson T. Szlachta

  7. 0
    div{
    position: relative;
    border: 1px solid #ddd; 
    width:150px; 
    height:50px;
    margin: auto;
    /*position: absolute; top: 0; left: 0; bottom: 0; right: 0;*/
}
img.displayed {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;

}

<html>
<div >
 <a>
 <img class="displayed" src="smiley.gif" >
 </a>
</div>
</html>

    demo-Hinzugefügt in jsfiddle

    InformationsquelleAutor user2775080

  8. 0

    Schauen, vielleicht haben Sie dort eine float Eigenschaft. In meinem Fall, die Einstellung float zu keine hilft. Jetzt div ordnungsgemäß ausgerichtet ist.

    InformationsquelleAutor yuliskov

Schreibe einen Kommentar