it-swarm.com.de

Die absolute CSS-Position funktioniert nicht mit margin-left: auto margin-right: auto

Angenommen, Sie haben die folgenden CSS auf ein Div-Tag angewendet

.divtagABS {
    position: absolute;
    margin-left: auto;  
    margin-right:auto;
 }

der linke Rand und der rechte Rand werden nicht wirksam

aber wenn Sie Verwandte haben, funktioniert es gut, d.h.

,divtagREL {
position: relative;
margin-left: auto;  
 margin-right:auto;
}

warum das? Ich möchte nur ein Element zentrieren

kann jemand erklären, warum das Setzen von Rändern auf Auto in absoluter Position nicht funktioniert?

68
user1118019

BEARBEITEN: Diese Antwort wurde verwendet, um zu behaupten, dass es nicht möglich ist, ein absolut positioniertes Element mit margin: auto; Zu zentrieren, aber dies ist einfach nicht wahr. Da dies die am häufigsten gewählte und akzeptierte Antwort ist, würde ich sie vermutlich einfach so ändern, dass sie korrekt ist.

Wenn Sie das folgende CSS auf ein Element anwenden

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

Geben Sie dem Element eine feste Breite und Höhe, z. B. 200px oder 40%, und das Element wird sich selbst zentrieren .

Hier ist eine Geige , das den Effekt demonstriert.

128
Kevin Bowersox

Ich habe diesen Trick verwendet, um ein absolut positioniertes Element zu zentrieren . Sie müssen jedoch die Breite des Elements kennen.

.divtagABS {
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
  }

Grundsätzlich verwenden Sie left: 50% und setzen dann die Hälfte der Breite mit einem negativen Rand zurück.

65
chipcullen

wenn das absolute Element eine Breite hat, können Sie den folgenden Code verwenden

.divtagABS{
    width:300px;
    positon:absolute;
    left:0;
    right:0;
    margin:0 auto;
}
37
GilbertSun

Arbeiten mit JSFiddle unten. Bei Verwendung der absoluten Position margin: 0 auto wird nicht funktionieren, aber Sie können dies tun (wird auch skalieren):

left: 50%;
transform: translateX(-50%);

Update: Arbeiten JSFiddle

14
Baked Inhalf

Ich hatte bereits das gleiche Problem und ich habe die Lösung, einen Container (.divtagABS-Container, in Ihrem Fall) absolut zu positionieren und dann den Inhalt darin relativ zu positionieren (.divtagABS, in Ihrem Fall).

Getan! Das Rand-Links- und das Rand-Rechts-AUTO für Ihre .divtagABS funktionieren jetzt.

1
Rafael Camargo

Alle Antworten waren lediglich Lösungsvorschläge oder Problemumgehungen. Aber immer noch keine Antwort auf die Frage: warum Rand: Auto funktioniert mit Position: relativ, aber nicht mit Position: absolut.

Folgende Erklärung war hilfreich für mich:

"Ränder sind für absolut positionierte Elemente wenig sinnvoll, da solche Elemente aus dem normalen Fluss entfernt werden und daher keine anderen Elemente auf der Seite wegschieben können Ränder wie dieser können sich nur auf die Platzierung des Elements auswirken, auf das der Rand angewendet wird, nicht auf ein anderes Element. " http://www.justskins.com/forums/css-margins-and-absolute-82168.html

0
Alex Vovchuk