Zentrierung ganze Seite mit CSS

Ich bin versucht zu zentrieren, meine ganze Seite nur mit CSS und es erweist sich als komplizierter, als ich es zunächst erwartet. Derzeit mein code funktioniert im IE aber nicht im Firefox, die eine änderung vornimmt. Die Seite kann gesehen werden hier. Unten ist der code Teil beteiligt:

#wrap {
    width: 960px;
    margin: 0 auto;
    padding: 6px;
    background: #FFFFFF;
}

Die Struktur meines HTML-ist:

<body>
<div id="wrap">
    Gubbins in here.
</div>
</body>

Es scheint, dass in Firefox alles nach dem wrap div-Element erstellt werden außerhalb. Dieses problem wird behoben, wenn ich ein 'float: left' auf der wrap-div, aber dann natürlich alles schwebt eher Links als Mitte.

Jegliche Hilfe würde sehr geschätzt werden.

  • 'wrap' ist kein gültiges HTML-element. Der CSS-Selektor #wrap Ziele-ids, nicht die tag-Namen. +1 für John Sheehan
  • Sorry mein Fehler ich mein markup ist in der Tat <div id="wrap">. Ich habe editiert oben. Sorry.
  • bluerobot.com/web/css/center1.html
InformationsquelleAutor Ronnie | 2008-12-31
  1. 5

    Ändern Sie Ihr markup zu 

    <body>
<div id="wrap">
    Gubbins in here.
</div>
</body>

    EDIT: wer den link haben Sie bereits getan. Sie wollen, um entweder overflow:auto; für #wrap oder fügen Sie ein clearing-div am Ende vor der schließenden-tag auf der wrap-div.

    Auch, auf deinem Beispiel-Seite, die wrap-div-Element fehlt das schließende tag.

    • Sorry mein Fehler, mein markup ist schon wie Sie gesagt haben.
    • Eigentlich auf der Suche wieder, auf dein Beispiel, du bist das schließen der div-Element auf der Zeile, die sagt </div> <!-- / navigation --> die navigation UL ist bereits geschlossen, also das div geschlossen wird die Wickel. bewegen Sie das schließende tag am Ende
    InformationsquelleAutor John Sheehan
  2. 0

    Verwenden Sie dieses CSS:

    body { text-align:center;}
#wrap {text-align:left; margin: 0 auto; width:960px;}

    Dann lassen Sie uns untersuchen Sie diese Aussage aus deiner Frage:

    alles nach dem wrap div-Element erstellt werden, die außerhalb

    Dass die Art, wie es funktioniert. Nicht alles, was außerhalb von Ihr wrap-div. Betrachten Sie es als ein Surrogat Körper.

    • Ich dachte text-align:center; funktioniert nicht für etwas anderes als text in FF?
    • margin: 0 auto; funktioniert gut für ihn, wenn seine markup-Fehler werden behoben
    • Es ist für den IE, nicht in firefox, um das IE-css-rendering-glitch, wenn Sie versuchen zu center-Inhalte.
    • aber er sagte, dass sein code funktioniert im IE aber nicht im FF
    • Ich habe korrigiert die markup-Fehler, die wurden hingewiesen. Dabei hatte ich noch das problem. Aber nach dem hinzufügen von overflow: auto zu wickeln, ist alles in Ordnung. Danke.
    • Ah, aber welche version des IE?
    • IE6+ Griffe margin: 0 auto; ohne Frage.
    • das ist gut zu wissen. nie so gemacht, bevor
    • Es funktioniert nun in Firefox 3 und IE 7.

    InformationsquelleAutor Joel Coehoorn
  3. 0

    Wenn Sie wissen, die Breite der Seite - und es ist behoben, können Sie mit der folgenden Methode.

    • Enthalten, die den Inhalt Ihrer Seiten mit einem div (die als wrapper)
    • Geben, diese 'wrapper' div eine Breite von 'W'
    • Position der wrapper-div mit " left: 50%;'

    jetzt, unter Verwendung der Tatsache, dass es möglich sei, eine negative Marge...

    • Ziehen wieder die Positionierung der wrapper-div mit " margin-left: -(W/2);'
    InformationsquelleAutor codeinthehole
Schreibe einen Kommentar