Cross-Browser-DIV-Center-Ausrichtung mit CSS
Was ist der einfachste Weg, um eine Ausrichtung eines div
deren position relative
horizontal und vertikal mit CSS ? Die Breite und die Höhe des div
ist unbekannt, d.h. es sollte für jedes div
dimension und in allen gängigen Browsern. Ich meine, der mittig ausgerichtet ist.
Dachte ich, um die horizontale Ausrichtung mithilfe:
margin-left: auto;
margin-right: auto;
wie ich hier.
Ist das eine gute cross-browser-Lösung für die horizontale Ausrichtung ?
Wie konnte ich die vertikale Ausrichtung ?
InformationsquelleAutor der Frage Misha Moroshko | 2010-05-29
Du musst angemeldet sein, um einen Kommentar abzugeben.
Horizontale Zentrierung ist nur möglich, wenn das element
width
ist bekannt, sonst ist der browser nicht herauszubekommen, wo zu beginnen und zu enden.Dies ist perfekt crossbrowser kompatibel.
Vertikale Zentrierung ist nur möglich, wenn das element absolut positioniert und hat eine bekannte
height
. Die absolute Positionierung würde allerdings brechenmargin: 0 auto;
so müssen Sie diesen Ansatz anders. Müssen Sie Ihrentop
undleft
zu50%
und diemargin-top
undmargin-left
zu den negative Hälfte seinerwidth
undheight
bzw.Hier ist eine copy ' N 'Paste' N ' 'runnable Beispiel:
Sagte, vertikale Zentrierung ist in der Regel nur selten angewandt, in der realen Welt.
Wenn die Breite und Höhe sind wirklich im Voraus nicht bekannt sind, dann werden Sie brauchen, um zu greifen, Javascript/jQuery um die
margin-left
undmargin-top
Werte und Leben mit der Tatsache, dass client werden die div-schnell verschoben werden, während das laden der Seite, die möglicherweise dazu führen, ein "wtf?" - Erlebnis.InformationsquelleAutor der Antwort BalusC
"Vertikale Zentrierung ist nur möglich, wenn das element absolut positioniert und hat eine bekannte Höhe." – Diese Aussage ist nicht ganz richtig.
Können Sie versuchen, und verwenden Sie
display:inline-block;
und die Möglichkeit zur hochkant innerhalb der übergeordneten box. Diese Technik erlaubt das ausrichten von element, ohne zu wissen, seine Breite und Höhe, obwohl es erfordert, dass Sie wissen Elternteils Höhe, zumindest.Wenn Ihr HTML;
Und CSS ist:
Dann #ausgerichtet-Mitte zentriert werden innerhalb von #container. Dies ist die einfachste Technik, aber es ist schön eins zu sein mit vertraut sind.
Regeln gekennzeichnet mit "/* für IE < 8 */" gesetzt werden sollte, in einem separaten stylsheet, über die Verwendung von conditional comments.
Können Sie ein Beispiel dieser hier: http://jsfiddle.net/UXKcA/3/
edit: (dies insbesondere snippet getestet in ie6 und ff3.6, aber ich verwende es viel, es ist ziemlich cross-browser. wenn Sie benötigen support für ff < 3, Sie müssen auch hinzufügen
display:-moz-inline-stack;
unterdisplay:inline-block;
innerhalb.inline-block
Regel.)InformationsquelleAutor der Antwort Misha Reyzlin
Überprüfen Sie das Demo auf jsFiddle
Stellen Sie folgende zwei Dinge
HTML ausrichten Attribut-Wert center
CSS margin-left und margin-right Eigenschaften Wert legen auto
CSS
HTML
InformationsquelleAutor der Antwort Jay Patel
Könnte man
.hide()
im div, wenn das DOM fertig ist, warten Sie, bis die Seite geladen ist, legen Sie die divmargin-left
undmargin-top
Werte, und.show()
die div wieder.InformationsquelleAutor der Antwort nickarmstronggr