Loading...

div Container absolut mittig Positionieren von WAM

Alles Rund um Webdesign, Seo und vielem mehr
Start / Blog - / div Container absolut mittig Positionieren

div Container absolut mittig Positionieren

Immer wieder stößt man auf Seiten, in der etwas genau in der Mitte, des Bildschirm gezeigt wird. Aber wie geht das? Wie berechnet man genau die Mitte bzw. wie bekommt ein DIV-Container dies berechnet. Eigentlich eine ganz einfache Sache. Sagt doch einfach dem DIV-Container er, soll in der Mitte stehen. Das Funktioniert wie folgt.

intro_image_div_center_new

 

Nehmen wir einen Container mit 600 px zu 400px namens center_box. Das dieser „absolute“ positioniert wird ist klar.
[sourcecode language=“css“]
position:absolute;
width:600px;
height:400px;
[/sourcecode]
Er soll in die Mitte. Also weisen wir den Container an er soll mittig stehen.
[sourcecode language=“css“]
Top:50%;
Left:50%;
[/sourcecode]
Upps, sieht komisch aus, wenn der so in die untere Ecke gepappt wird. Nun kommt der kleine Trick an der Sache.

Damit er versteht das er nun ein stück hoch und dann noch zur Seite kommen soll, müsst Ihr etwas rechnen. Und zwar gebt ihr in diesem fall immer die hälfte der höhe und der breite an. Diese setzt Ihr dann in ein Minus (-). Sieht so aus -200px (für die Höhe).

Sollte aber mit den richtigen Anweisungen geschrieben sein.
[sourcecode language=“css“]
margin-left:-300px;
margin-top:-200px;
[/sourcecode]
Wenn ich nun das Ergebnis anschaut, steht der Container, genau in der Mitte.

Noch mal die komplette CSS Anweisung.
[sourcecode language=“css“]
.center_box
{
position:absolute;
width:600px;
height:400px;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-200px;
overflow:auto;
}
[/sourcecode]

Geschrieben von WAM
Avatar for WAM
Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

KOMMENTARE (3) “div Container absolut mittig Positionieren”

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Lassen Sie uns Sprechen