10. September 2010

Kurz gebloggt: Website horizontal und vertikal zentrieren

• HTML & CSS
• Netzreisen
• Privatkram
• 0 Kommentare

Manchmal mag es schön aussehen, wenn man einer Website eine feste Höhe sowie eine feste Breite verpasst und diese Box, die dabei entsteht, dann vertikal und horizontal zentriert. Wie das geht? Mit ganz wenig CSS. Der folgende Artikel zeigt wie's geht.

Dieses kleine Codeschnipselchen habe ich bei einer meiner zahlreichen Netzreisen gefunden.

#wrapper {
  width:800px;
  height:600px;
  /* für horizontale und vertikale Zentrierung */
  position: absolute;
  left:50%;
  margin-left:-400px;  /* Um die Hälfte der Breite nach links schieben */
  top:50%;
  margin-top:-300px;  /* Um die Hälfte der Höhe nach oben schieben */
}

Wie arbeitet der Code? Ganz einfach:

• In Zeile 2 und 3 werden Breite und Höhe des Containers festgelegt.
• Für die horizontale und vertikale Zentrierung ist eine absolute Positionierung des Containers notwendig. (Zeile 5)
• Die nächsten Zeilen sorgen für die eigentliche Zentrierung. (Zeile 6-9) Hierbei sind nur die margin-Werte jeweils anzupassen. Der margin-left-Wert muss stets die Hälfte der Breite in px betragen, der margin-top-Wert die Hälfte der Höhe in px.

Im HTML legt man dann einfach ein div-Container an, der sämtliche Inhalte enthält:

<div id="wrapper">
  <p>Hier kommt sämtlicher Inhalt hin.</p>
</div>

Fertig. Horizontal und vertikal zentriert. So einfach ist das.

Kommentare

Zu diesem Beitrag wurden keine Kommentare verfasst.

Commenting is not available in this weblog entry.