Warum Divs sind nicht gut zentriert?

Ich habe einen solchen Code https://jsfiddle.net/96Lnxr38/3/ aber wie Sie sehen können - divs mit Klasse d1 sind nicht richtig ausgerichtet. Wenn ich mehr Leerzeichen zwischen <div class="d1"></div> Elemente hinzufügen - Ausrichtung wird gut funktionieren. Ist es ein Browser Bug oder mein Fehler? Ich habe festgestellt, dass FF gut funktioniert und Chome/Safari zeigt mir diesen Fehler.Warum Divs sind nicht gut zentriert?

Quelle

2017-04-01 Egor Baranov

Wenn Sie eine Pixelbreite verwenden, ist die beste Lösung: margin: auto;

.cont { 
    text-align: center; 
    width: 500px; 
    margin:auto; 
} 

.d1 { 
    width: 300px; 
    height: 500px; 
    margin-top: 10px; 
    background-color: red; 
    display: inline-block; 
    margin:auto; 
}

folgen Sie diesem Link: https://jsfiddle.net/96Lnxr38/6/

Quelle

2017-04-01 07:56:44

Das Problem wegen Leerzeichen ist zwischen inline-block divs. Diese Leerraumzeichen nehmen ebenfalls am Fluss teil und belegen den Platz zwischen Inline- oder Inline-Blockelementen.

Versuchen Sie einfach entfernen Sie Leerzeichen zwischen div.d1 Elementen:

.cont { 
 
     text-align: center; 
 
     width: 500px; 
 
     word-spacing: 80px; 
 
    } 
 

 
    .d1 { 
 
     width: 300px; 
 
     height: 500px; 
 
     margin-top: 10px; 
 
     background-color: red; 
 
     display: inline-block; 
 
    }

<body> 
 
    <div class="cont"> 
 
    <!-- Note no whitespace between divs --> 
 
    <div class="d1"></div><div class="d1"></div><div class="d1"></div> 
 
    </div> 
 
</body>

Eine weitere Option ist die display-block in Ihrem .d1 Stil zu ändern.

Quelle

2017-04-01 08:07:14

Vielen Dank für die Antwort, aber es gibt zwei Probleme: Ich kann 'display' nicht in' block' ändern, weil ich alle drei Elemente in derselben Zeile für breite Bildschirme haben möchte (es wurde im Beispiel nicht gezeigt) und ich kann keine Leerzeichen entfernen, da in diesem Fall keine 80px Leerzeichen zwischen d1 divs vorhanden sind, wenn es sich in derselben Zeile befindet. –

Bekam den Punkt. Sie könnten Rand anstelle von Wortabstand verwenden. Versuchen Sie, den linken und rechten Rand für .d1 auf 40px einzustellen –

Warum Divs sind nicht gut zentriert?

Antwort

Verwandte Themen