Seiteninhalt horizontal und vertikal zentrieren





Um einen div-Container mit beliebigen Inhalt mittig auf dem Bildschirm zu zentrieren (horizontal und vertikal), gibt es verschiedene Möglichkeiten. Eine davon ist Zentrierung durch negative margins. Hierzu ist es allerdings erforderlich, die Größe unseres Containers zu kennen und explizit fest zu legen.

Zuerst legen wir also die Größe mittels der Angaben height: 150px; und width: 300px; fest. Danach positionieren wir unseren Container mit der linken, oberen Ecke genau mittig durch die Angaben position:absolute; top: 50%; und  left: 50%;. Werfen wir mal kurz einen Blick auf unsere bisherigen CSS-Anweisungen:

<style type="text/css">
#content {
   height: 150px;
   width: 300px;
   position:absolute;
   top: 50%;
   left: 50%;
   }
</style>

Da wir etwas Innenabstand (5 Pixel) von allen Seiten haben möchten, nutzen wir padding: 5px. Darüber hinaus möchten wir jetzt noch einen schmalen Rahmen um unseren Container haben. Das erreichen wir mir der Anweisung border: 1px dotted #FFFF00. 1px steht für einen 1 Pixel breiten Rahmen, dotted bedeutet gepunktet und mit #FFFF00 legen wir die Rahmenfarbe fest. Abschließend geben wir unseren div-Containers mit background-color: #3F00FF; eine neue Hintergrundfarbe. Nun schaut unsere CSS-Anweisung so aus:

<style type="text/css">
#content {
   height: 150px;
   width: 300px;
   position:absolute;
   top: 50%;
   left: 50%;
   padding: 5px;
   border: 1px dotted #FFFF00;
   background-color: #3F00FF;
   }
</style>

Jetzt müssen wir unseren div-Container noch in der Mitte platzieren. Das erreichen wir mit einem Trick. Wir wissen die Größe und das sich die linke, obere Ecke genau in der Mitte befindet. Wir verschieben nun über negative margins unseren Container so, dass er zentriert angezeigt wird. Dazu ist nur etwas Rechenarbeit erforderlich.

Dummerweise interpretieren Browser die Angaben für padding und border unterschiedlich.  Der IE6 behält die Angaben für die Größe des div-Container bei und bringt die Angaben für border und padding in den Container ein. Der Firefox 1.5 addiert beide Werte zum Container und vergrößert ihn dadurch. Letztendlich ist es jedem selber überlassen, vielleicht sollte man einfach auf Ränder und Innenabstand verzichten. Ansonsten geht es ja meist nur um ein paar Pixel und die fallen kaum auf.

Wir müssen nun unseren Container um die Hälfte seiner Höhe nach oben und die Hälfte seiner Breite nach links verschieben. Für den Firefox müssten wir zusätzlich noch die Werte von Rahmen und Innenabstand addieren, was uns zu folgender Rechnung bringt:

(150/2) +5+1 = 81     und     (300/2) +5+1 = 156 

Unsere Ergebnisse setzen wir mit der CSS Anweisung margin: -81px 0 0 -156px; um. Unser fertiges Stylesheed schaut so aus:

<style type="text/css">
#content {
   height: 150px;
   width: 300px;
   position:absolute;
   top: 50%;
   left: 50%;
   padding: 5px;
   border: 1px dotted #FFFF00;
   background-color: #3F00FF;
   margin: -81px 0 0 -156px;
   }
</style>

Einen kleinen Haken hat diese Methode allerdings. Ist das Browserfenster kleiner als der div-Container verschiebt sich ein Teil des Inhalts in den nicht sichtbaren Bereich am Rand, ohne das eine Möglichkeit zum Scrollen geboten wird.

Tags: ,

Hinterlasse eine Antwort

Kontaktformular - Copyrighthinweis und Impressum