CSS "margin: 0 auto" nicht zentrieren

Okay, ich verstehe, dass dieses Thema behandelt wurde. Aber ich habe verschiedene Lösungen und haben wenig Erfolg gehabt mit Ihnen.

Ich habe keine Ahnung, warum diese margin: 0 auto; funktioniert nicht. Ich habe versucht, die Entschädigung der Polsterung mit width: calc(33% - 40px);, aber das hat nicht funktioniert.

Jede Hilfe auf, warum dies geschieht, mit Lösungen wäre sehr dankbar!

CSS:

.container {
  margin: 0 auto;
}

[class*='col-'] {
  float: left;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  width: 33.33%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.col-word {
  width: auto;
  height: auto;
  padding: 25px;
  border: 5px #000 solid;
  border-left: 0px;
  border-right: 0px;
  background-color: #A7F4F6;
  font-size: xx-large;
  text-align: center;
}

HTML:

<div class='container'>
  <div class="grid">
    <div class='grid'>
      <div class="col-1-3">
        <p class='col-word'>T</p>
        <p class='col-word'>V</p>
      </div>
    </div>

    <div class='grid'>
      <div class='col-1-3'>
        <div class='letter'>W</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>P</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>V</div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/xm2gvzbf/5/

InformationsquelleAutor JP Foster | 2016-03-05
  1. 6

    Es funktioniert.

    Das problem ist, du bist zentrieren einer div, das ist ein block-level-element standardmäßig, und die deshalb nimmt 100% der Breite des übergeordneten Elements (body, in diesem Fall). Es gibt also keinen Raum horizontal zu bewegen, daher auch kein Platz zum center.

    Für eine Abbildung siehe in diesem überarbeitete demo, die hat einen zusätzlichen Rand um .container.

    Wenn Sie reduzieren Sie die Breite des .container sehen Sie die Zentrierung der Arbeit. Hier eine zweite überarbeitete demo mit width: 50% angewendet .container.

    • Danke, das ist hilfreich!!! Aber hier ist der Haken. Ich will es auf rund 90%. Da die Daten auf der Seite dargestellt wird, erheblich variieren. Manchmal werden die Daten belegen 90% von der Seite an, während andere Daten, besetzen 20% der Seitenbreite. Gibt es dafür eine Lösung? So oder so, ich will, dass es Aussehen zentriert. Ich fürchte, dass das erzwingen einer festen Breite wie 500 Pixel. Es wird nicht reagieren mit verschiedenen Daten.
    • Sie können .container einer flexbox, und dann Mitte der Inhalt. Dann brauchen Sie nicht zu befürchten width von .container. stackoverflow.com/a/33049198/3597276
    • flex-box ist genial. danke!
    InformationsquelleAutor Michael_B
  2. 1

    Es funktioniert tatsächlich, aber ohne die Angabe der Breite dauert es volle 100%. Probieren Sie etwas wie:

       .container {
    margin: 0 auto;
    width:50%;
    }

    Hoffe das kann helfen

    InformationsquelleAutor Alexander Bell
  3. 1

    Sollten Sie die Breite des div für die margin:auto, um zu arbeiten. versuchen Sie, verwenden Sie die Breite in Prozent, um Ihre div reagieren, wie gut.

    InformationsquelleAutor Leo The Four
  4. 0

    Sollten Sie die Breite auf .container zu lassen, die margin: 0 auto; Arbeit. Finden Sie die aktualisiert JSfiddle.

    InformationsquelleAutor Roy
Schreibe einen Kommentar