CSS Zentrierung gibt unterschiedliche Ergebnisse

diesen Code Betrachten wir ein div relativ zum Zentrum, um es übergeordnete Element ist:CSS Zentrierung gibt unterschiedliche Ergebnisse

div { 
width:200px; 
position:absolute; 
left:50%; 
margin-left:-110px; 
padding:10px; 
display:table; 
}

Wir verwenden (Breite/2) - Klotzen, nicht wahr?

Warum zentrieren alle Webkit-basierten Browser (Safari und Chrome) dieses div 10px zu weit nach links? Diese 10px ist die Polsterung.

So haben wir zwei Fronten hier:

Chrome + Safari -> Polster muss nicht sein richtig zum Zentrum enthalten
Firefox, IE, Opera -> Polster muss nicht be enthalten zur korrekten Mitte

Jetzt ist meine Frage, welche von beiden macht es richtig?

BEARBEITEN:

Angesehen; Das Problem tritt nur beim Hinzufügen von display auf: Tabelle; zum div. Ein Beispiel: http://jsfiddle.net/rhKW7/1/link text

Quelle

2011-01-04 DADU

Ich kann Ihr Problem nicht wiederherstellen. Ihr Code funktioniert browserübergreifend.

Live-Demo:http://jsfiddle.net/SXzbF/1/

Edit: ich herausgefunden, was das Problem ist:

In Chrome (zumindest), wenn Sie display:table gesetzt, dann als Ergebnis Das Padding dieses Elements wird nicht verwendet. Ich denke, das liegt daran, dass für TABLE-Elemente das Auffüllen nur auf das TD-Element (zu den Zellen) und nicht auf das TABLE-Element eingestellt ist. Ich bin mir nicht sicher, ob das Auffüllen von TABLE gültig ist, aber ich empfehle Ihnen, dies nicht zu tun, sondern stattdessen die Auffüllung der Zellen zu setzen.

Quelle

2011-01-04 20:06:39

Es tut mir leid. Ich denke, ich habe das Problem ein wenig zu sehr vereinfacht. Ich werde den Code in einem Moment aktualisieren. – DADU

Das Problem wurde gefunden: Dieses Problem tritt nur beim Hinzufügen von display: table auf; zum Kindelement. – DADU

@DADU Ja, Tische vermasseln Zeug. Das wusste ich schon :) Warum verwenden Sie 'display: table' auf einem DIV, anstatt das TABLE-Element direkt zu verwenden? –

Sie tun es falsch. Sie sollten verwenden

margin: 0 auto;

Das wird das Element in seiner übergeordneten zentrieren.

Quelle

2011-01-04 19:52:42 GolezTrol

Golez Aber das DIV ist absolut positioniert. Ich denke nicht, dass das in solchen Fällen funktioniert. –

Dies ist eine feine Technik, funktioniert aber nicht mit absolut positionierten Elementen. – DADU

Ich nahm an, dass die Positionierung Teil Ihres Versuchs ist, das Element zu zentrieren. Wenn dies nicht der Fall ist, ist dies leider keine gültige Lösung. Warum aber ein absolut positioniertes Element zentrieren? Die Zentrierung scheint eine relative Positionierung zu implizieren. – GolezTrol

Je nach Ihrer Implementierung könnten Sie das Element enthalten, das in einem 100% breiten und absolut positionierten div zentriert werden soll und dann mit dem aktuellen Element, das Sie verwenden, den Rand: 0 auto, um es absolut zu zentrieren positioniertes Element.

Quelle

2011-01-04 20:03:33

Ich fürchte, das ist diesmal nicht möglich, da keine zusätzlichen Elemente hinzugefügt werden können. – DADU

CSS Zentrierung gibt unterschiedliche Ergebnisse

Antwort

Verwandte Themen