Positionierung mit CSS - Objekt zentrieren
    
 Home • CSS • Objekt zentrieren  

 Objekt zentrieren mit CSS - Seite 01  (horizontale Zentrierung)

Ein Objekt oder die gesamte Seite horizontal zentrieren. Hier demonstriert in einer Anwendung, die ein 600 Pixel breites Objekt in der Bildschimmitte positioniert. Zwei Möglichkeiten das mit CSS-Anweisungen zu realisieren.

SeitenObjekt oder gesamte Seite zentrieren mit CSS

Hier finden Sie Informationen zur Technik mit CSS-Anweisungen Seiteninhalte, Objekte oder auch die gesamte Seite horizontal mittig auszurichten. Ich zeigen Ihnen auf dieser ersten Seite zwei Möglichkeiten auf.

1  Möglichkeit

Ich habe dem Element die ID 'inhalt' zugewiesen. Die Breite des Elements ist 600 Prixel. Das Element soll unabhängig von der Fensterbreite immer horizontal mittig positioniert sein.



Hier müssen Sie Grundrechenarten beherrschen! Der Wert für die halbe Breite (hier 600 / 2 = 300) muss ermittelt und in den CSS-Anweisungen verwendet werden.

Die CSS-Anweisungen im HEAD-Bereich
body {
    margin: 0px;
    padding: 0px;
}

#inhalt {
    position: absolute;
    left: 50%;
    width: 600px;
    margin-left: -300px;
}
Oben: Zunächst wird das Element mit der ID 'inhalt' mit einem linken Abstand von 50% der Fensterbreite nach rechts verschoben (left: 50%). Dann wird der Abstand links mit dem negativen Wert der halben Objektbreite (-300px) festgelegt.


im Body:
<body>
<div id="inhalt">

hier stehen Inhalte

</div>
</body>


2  Möglichkeit

Das gleiche Resultat sollten Sie mit dieser Notierung erzielen:

Die CSS-Anweisungen im HEAD-Bereich
body {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

#inhalt {
    width: 600px;
    margin: 0px auto;
    text-align: left;
}
im Body:
<body>
<div id="inhalt">

hier stehen Inhalte

</div>
</body>



Wenn Sie den gesamten Seiteninhalt in einen <DIV>-Beich mit der ID 'inhalt' einfassen, wird die gesamte Seite zentriert angezeigt.










 Objekt oder Seitenelement zentrieren mit CSS - Seite 02

 Inhaltsseite im Browserfenster zentrieren (Tabellentechnik)

 Frameset im Browserfenster zentrieren (Menü FRAMES)

 Objekt in der Fenstermitte zentrieren (Tabellentechnik)

 Fehlersuche bei vertical-align: middle - 100% Tabellenhöhe