Zentriertes HTML/CSS-Seitenlayout ohne Tabellen

Veröffentlicht am von

Um eine HTML-Seite zentriert darzustellen, ohne mit Formartierungen wie <center>…</center> oder <div align=“center>…</div> oder Tabellen arbeiten zu müssen bedarf es einfacher Lösung:

Ein Div-Container kann einfach zentriert dargestellt werden, indem du ihm eine feste Breite und als horizontalen Margin-Wert „auto“ zuweist.

Das gaze könnte in stark vereinfachter Form etwa so aussehen:

…
<style>
<!–
div#wrapper {
margin: 50px auto;
width: 500px;
height: 500px;
background: yellow;
}
–>
</style>
…
<div id=“wrapper“>
Das ist der Seiteninhalt..
</div>
…

Ähnliche Beiträge:

3 Gedanken zu „Zentriertes HTML/CSS-Seitenlayout ohne Tabellen“

  1. Hallo!
    Das stimmt so nicht ganz.

    #wrapper wird in deinem Beispiel nicht ganz zentriert – das ist ja das Problem.
    In dem Falle würde die linke Kante (sieht man vor allem bei divs mit Rändern) in der Mitte sein, der rest des Elements eben nach rechts verschoben.
    Deswegen hier – du hast den Vorteil, dass du von einem festen Maß ausgehst – aufpassen und statt margin: 50px auto; brauchst du etwas anderes:
    left: 50%; margin: 50px -250px; [<– Hier musst du das div wieder um die Hälfte nach links verschieben, damit es stimmt]

    Schönen Gruß
    Michał Słupczyński
    Administrator http://asmodiel.de

  2. Moin moin,
    wieso steht da die linke Kante in der Mitte? Das kann ich nun nicht so ganz nachvollziehen.
    In diesem wp ist der Inhalt auch so zentriert und das funktioniert doch auch.
    Es funktioniert lediglich nicht in diversen ie-Versionen, sofern kein Doctype wie < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> o.ä. vorhanden ist.
    Aber der gehört ja zu jeder Seite dazu.
    Klar läuft deine Version auch – die ist mir auch bekannt. Was mir aber an der obigen etwas besser gefällt ist, dass man nicht so viel rechnen muss…
    lg tofix

Kommentare sind geschlossen.