Layer mittig ausrichten


Hüufig mächte man einen Text oder einen Layer genau mittig ausgerichtet haben. Ebenso häufig scheiter es an dem nötigen know-how. Desshalb erläutere ich euch das in diesem Tutorial.

Zuersteinmal, definieren wir in einer CSS Datei oder im Header im CSS-Teil des HTML Dokuments einen Layer. Dies kann z.B. so aussehen:

Layer definieren:
#layer {
position: absolute;
visibility: visible;
left: 50%;
top: 50%;
width: 500px;
height: 100px;
}


Nun zur Bedeutung des Codes:
das Attribut position sagt dem Browser, wo genau der Layer sich befindet. Die Position wird (mit den Attributen left, right, top und bottom) relativ zum Bildschirmrand angegeben - in dem Fall also 50% von Links und 50% von oben.
Mit den Parametern width und height geben wir die größe des Layers an.
Würde man sich nun diesen Layer im Browser ansehen, würde man feststellen, dass der Layer garnicht genau in der Mitte dargestellt wird! Also müssen wir CSS-Attribute dem #layer hinzufügen:

neue Attribute:
margin-left: -250px;
margin-top: -50px;


Das Attribut margin definiert den Ausenabstand. Wenn wir diesen nun um die Hälfte der Weite des Layers nach Links verlegen (also -250px) und um die Hälfte der Höhe nach oben (also 50px), so wird der Layer richtig dargestellt.

Die vollständige Definition des Layers sieht also so aus:
Layer definieren:
#layer {
position: absolute;
visibility: visible;
left: 50%;
top: 50%;
width: 500px;
height: 100px;
margin-left: -250px;
margin-top: -50px;
}


So einen Layer sichtbar, macht man wie folgt:
Layer sichtbar machen:
<div id="layer"></div>

in den Div-Tag kann nun ein Text geschrieben werden, der genau in der Mitte des Bildschirms bzw. des Browserfensters zu sehen ist.Geschrieben von michi am 06.07.2004 (7878x gelesen)
Diese News stammt von der Seite http://www.yubb.de
Sie ist unter http://www.yubb.de/artikel469.html direkt aufrufbar.

Jegliche Reproduktion dieser Seite oder ihrer Inhalte ist strengstens untersagt.