Horizontales Zentrieren

von Simon Bethke | 0 | 11278 Aufrufe

Anzeige Hier werben

Um ein Element in (X)HTML mit Hilfe von CSS horizontal zu zentrieren gibt es grundsätzlich zwei Wege. Leider haben beide Möglichkeiten auch ihre Nachteile weshalb es sinnvoll ist beide Methoden zu beherrschen.

Zentrieren mittels text-align

Die CSS-Eigenschaft text-align ist ursprünglich dazu gedacht, inline-Elemente auszurichten. Mittels einer festen Breite und automatischen Außenabständen ist es jedoch auch möglich block-Elemente zu zentrieren:

Zentrierren mittels text-align:center  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
  <head>
    <style type="text/css">
      html, body{
        text-align:center;}
      div#zentriert{
        width:100px; 
        margin:0px auto;
        text-align:left;}
    </style>
  </head>
  <body>
    <div id="zentriert" style="background:#f00;">Block</div>
  </body>
</html>

Nachteile

Die Zentrierung richtet sich nach der Breite des angezeigten Bereiches. Wenn eine Internetseite unter zwei verschiedenen Menüpunkten nun eine Unterseite hat, die komplett auf den Bildschirm passt (keine Scrollleiste), und eine andere Unterseite, die aufgrund ihrer Überlänge eine Scrollleiste erzwingt, dann sieht man unter manchen Browsern, dass die Seite beim Umschalten zwischen den Menüpunkten hin- und herspringt.

Ein weiterer Nachteil ist, dass man den Container nicht gleichzeitig floaten lassen kann. Dies wäre eventuell sinnvoll um die Höhe des zentrierten Containers automatisch der Länge eines Inhaltes anzupassen, der auch floated (bekannt als FnE-Methode).
Dies ist zwar auch durch ein clear möglich, erfordert jedoch zusätzliche Container, die nur dem Layout dienen und somit auf einer semantisch korrekten Seite nichts zu suchen haben.

Zentrieren mittels absoluter Positionierung

Diese CSS-Eigenschaft position:absolute war zwar nie zum zentrieren von Containern gedacht. Nur durch negative Außenabstände wird es möglich Container bei varierender Anzeigebreite (bedingt-) dynamisch zu zentrieren. Darüber hinaus bietet sich auch die Möglichkeit Container nicht ganz zu zentrieren, sondern zum Beispiel dynamisch im goldenen Schnitt auszurichten.

Zentrieren mittels position:absolute  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html>
  <head>
    <style type="text/css">
      div#zentriert{
        width:100px; 
        margin-left:-50px; /* die halbe Breite */
        position:absolute;
        left:50%;}
    </style>
  </head>
  <body>
    <div id="zentriert" style="background:#f00;">Block</div>
  </body>
</html>

Nachteile

Bei einer dynamischen Höhe eines solchen Containers ist es nicht möglich weitere Container auf gleicher XML-Hierarchieebene direkt unterhalb des Containers zu positionieren, da dieser komplett aus dem Elementenfluss entfernt wird.

Wie auch beim Zentrieren mittels text-align kommt es vor, dass die Seite aufgrund von Scrollleisten springt.

Über den Autor: Simon Bethke
macht zur Zeit eine Ausbildung zum Fachinformatiker für Anwendungsentwicklung. Im Rahmen dieser Ausbildung lernt er vor allem den Umgang mit JAVA und Oracle. Als Nebenjob arbeitet Simon nun seit 6 Jahren bei einer kleinen Webdesignfirma wo er maßgeblich am Layout und der validen, technischen Umsetzung der Webseiten beteiligt ist.
Profilseite betrachten