Seiteninhalt horizontal und vertikal zentrieren 2





Einen div-Container auf einer Seite in der Mitte vertikal zu positionieren ist mit text-align: center; problemlos zu realisieren. Anders sieht es aus, wenn man ein div horizontal in der Mitte positionieren möchte. Eine etwas umständlich anmutende Methode mit zwei in einander verschachtelten div bringt gute Ergebnisse z.B. kann man dann ganz normal scrollen, wenn der Inhalt größer ist als der div-Container.

<style type="text/css">
#center {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
left: 0px;
margin-top: -260px;
}
#content {
text-align: left;
position: relative;
width: 600px;
height: 400px;
margin: 20px auto;
padding: 30px;
border: 10px;
}
</style>

In diesem Beispiel wird im content-div die Größe des eigentlich div-Containers mit width und height festgelegt. Darüber hinaus können je nach Bedarf auch die Angaben für Außenabstand: margin, Innenabstand: padding und Rahmen: border verwendet werden. Alle Angaben müssen feste Werte enthalten, prozentuale Angaben sind hier nicht zulässig.

Der Wert für margin-top im center-div muss entsprechend der vorgenannten Angaben berechnet werden, damit der content-div vertikal genau mittig zentriert wird. Der Container wird dadurch um die Hälfte seiner Höhe zuzüglich der Werte für margin, padding und border nach oben verschoben.

In unseren Beispiel sieht die Berechnung wir folgt aus:
(400/2)+20+30+10=260
Daraus ergibt sich für margin-top ein Wert von -260px. Der ein zu tragende Wert ist deswegen negativ, da wir unseren div-Container nach oben verschieben müssen.

Der Aufruf in der Seite schaut verschachtelt so aus :
<div id="center">
<div id="content">
(zentrierter Inhalt, Text, Bilder usw.)
</div>
</div>

Tags: ,

Eine Antwort zu “Seiteninhalt horizontal und vertikal zentrieren 2”

  1. Monika sagt:

    HI
    mein Link führt direkt zu einem Artikel indem ich eine einfacherer Methode vorstelle.

    Möge er anderen auch hilfreich sein

    lg

Hinterlasse eine Antwort

Kontaktformular - Copyrighthinweis und Impressum