CSS Zentrierung tricks
Mein Lieblings-Gleichung für die Zentrierung ein xhtml-element mit nur CSS ist wie folgt:
display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_
Gibt es auch die einfachere margin:auto-Methode in Browsern, die es unterstützen. Hat jemand knifflige Möglichkeiten, um Kraft anzuzeigenden Inhalt zentriert in seinem container? (bonus-Punkte für die vertikale Zentrierung)
edit - oops, vergessen die 'negative' Teil eines in der margin-left. behoben.
- Multipliziert man?!
- Haha... ich bin mit John.
- Auch, Links ist Breite/2 - wie ist das zentriert? Wenn ich Stimmen übrig, würde ich vote auf margin:auto; es ist das zuverlässigste.
- warum muss man multiplizieren, indem man an der Unterseite?
- Hoppla, tut mir Leid, dass. sollten negative. behoben.
- Oh, und Bis - Sie bewegen es 50% nach rechts, dann wieder 1/2 Breite Links wieder, welche Zentren es. Nachdenken über es für eine Sekunde, und ziehen Sie es aus, Sie werden es bekommen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Stick mit Margin: 0 auto; für die horizontale Ausrichtung;
Wenn Sie brauchen, vertikale Ausrichtung, als auch mit position: absolute; top: 50%; margin-top: -(Breite/2)px; bewusst Sein, obwohl, Wenn Ihre container hat mehr Breite als der Bildschirm ist ein Teil davon fällt aus dem Bildschirm auf der linken Seite mit der Position: absolute-Methode.
scheint das zuverlässigste aus meiner Erfahrung.
Gut, dass scheint wie ein massiver overkill, ich habe zu sagen. Ich dazu neigen, den container zu
text-align:center;
für alte Browser,margin:auto;
für moderne Browser, und lassen Sie es so. Dann reset text-align im element (wenn es text enthält).Natürlich einige Dinge müssen Einstellung als block und breiten brauchen, Einstellung... Aber was auf der Erde Sie versuchen zu Stil, dass muss , dass viel daran herum zu hacken?
Margin:auto funktioniert in allen Browsern, so lange wie Sie sicherstellen, dass IE in den standards-Modus.
Es ist mehr wählerisch als andere, und erfordert Ihre doctype in die allererste in Ihrem Dokument, was bedeutet, dass keine whitespaces (Leerzeichen, Tabulatoren oder Zeilenvorschübe) vor.
Wenn Sie das tun, margin:auto ist der Weg zu gehen! 🙂
nur ein Hinweis, dass die Marge:auto; Methode funktioniert nur, wenn die browser berechnen die Breite des Elements zentriert werden, und die Breite des übergeordneten Containers. in vielen Fällen ist das einstellen von width:auto; funktioniert, aber in einigen nicht.
Dies ist ein praktisches Lesezeichen für CSS-tricks
http://css-discuss.incutio.com/
Enthält viele der Zentrierung tricks zu.
Die absolute Positionierung mit 50% - Ansatz hat den gravierenden Nebeneffekt, dass, wenn das browser-Fenster schmaler dann das element, dann wird der Inhalt angezeigt, aus der linken Seite des browser - keine Möglichkeit zum scrollen, um es.
Stick auf die auto-Margen - Sie sind weit mehr als zuverlässig.
Wenn Sie im Standards-Modus (was Sie sollten), dann werden Sie unterstützt in allen Browsern, die Sie wahrscheinlich interessieren.
Können Sie die text-align-hack, wenn Sie wirklich brauchen, um Unterstützung für Internet Explorer 5.5 und früheren Versionen.
Dies funktioniert gut in allen gängigen Browsern. Wie bereits erwähnt
margin: 0 auto;
funktioniert nicht in allen semi-aktuellen IE-Versionen.Versuchen Sie dieses; weiß nicht, ob es funktioniert im IE, funktioniert gut, in der Fx, obwohl. Es dreht sich ein DIV-block auf der Seite mit CSS (kein JavaScript), nicht margin-auto, und der text innerhalb der DIV-block ist immer noch Links ausgerichtet. Ich versuche nur, um herauszufinden, ob vertikal zentrieren könnte funktionieren auf diese Weise, auch, aber bisher ohne Erfolg.