Horizontal Zentrieren - Teil2
Nach obenWebseite horizontal Zentrieren (Teil 2)
Eine weitere Möglichkeit eine Webseite horizontal zu zentrieren stellt die absoluten Positionierung eines zentralen Containers in Verbindung mit negativen Seitenabständen.
Die Html-Struktur ist der des ersten Teils identisch:
...
<body>
<div id="container">
<!-- alle anderen Elemente der Seite -->
</div>
</body>
...
Folgendes CSS sorgt für die Zentrierung
position: absolute; /* wichtig */
left: 50%; /* wichtig */
margin: 0 -350px; /* wichtig */
width: 700px; /* Beispielbreite */
height: 500px; /* Beispielhöhe */
Erklärung:
left: 50%; rückt den Conatiner um die halbe Bildschirmbreite nach rechts. Anschließend wird durch margin: 0 -350px; genau die Hälfte der Conatinerbreite rechts abgeschnitten und links hinzugefügt; dadurch wird der Container exakt in die Mitte des Bildschirm gerückt.
Sigi
Die Methode funktioniert leider nur vernünftig, solange das Browserfenster nicht schmaler als die Beipielbreite ist, sonst rückt der Container nach links ins Nirwana und ist auch nicht über Scrollen zu erreichen. Also doch lieber mit "margin: 0 auto;" !