CSS
Diese Seite drucken Hier können Sie uns eine Emaiil schreiben zurück Zur Übersicht vorwärts Links | Archiv   Letzte Änderungen 21.08.2019
     
Layer auf der Webseite Zentrieren
CSS-Layer lassen sich exakt definieren. Das gilt sowohl für ihre Größe, als auch für ihre Position auf dem Monitor. Doch was, wenn das nicht gewünscht ist und der Layer ganz einfach zentriert erscheinen soll? Wir haben die Lösung.

Einen direkten Befehl für das Zentrieren eines Layers gibt es nicht. Allerdings kann ein Text oder ein Bild mittig ausgerichtet werden. Das machen wir uns zunutze.

Der Trick beruht darauf, das wir text-align : center bereits im <body>-Tag unterbringen. Nun würde natürlich jedes auf der Seite befindliche Element in die Mitte rücken. Um das zu unterbinden, befehlen wir dem Inhalt des Layers mit text-align : left nach links zu rücken. Zusätzlich werden die Seitenränder (margin) des Layers auf Auto gesetzt. Das klappt wunderbar mit allen modernen Browsern. Hier geht's zur Live Demo.

Der Quellcode für den <body>-Tag

<body style="margin:20px 0px; padding:0px; text-align:center;">

Der Quellcode für den Layer

<div id="layer" style="width:400px; height : 380px; border : 1px solid black; margin : 0px auto; text-align : left; padding : 6px;">Layer mit Inhalt</div>