Deutsche Übersetzung der Seite "Web Style Sheets CSS tips & tricks"
Originale Version: http://www.w3.org/Style/Examples/007/center.html
Aktuelle - übersetzte - Version: http://www.WSS-EXPERT.de/Style/Examples/007/center.html
Übersetzer: A.Friedrich
Bookmark: AddThis Social Bookmark Button

Sehr geehrter Leser dieses Dokumentes - bitte beachten Sie dass es sich bei dieser Seite um die Übersetzung eines W3C Textes handelt.
Der Original Text ist urheberrechtlich geschützt, bitte beachten Sie die im Originaldokument vermerkten Hinweise. Die Rechte an der Übersetzung selbst liegen allein beim Übersetzer. Für eventuell vorhandene Fehler in der Übersetzung kann keine Gewähr übernommen werden, das einzig massgebliche und legitime Dokument ist das englische W3C Original.
Kommentare des Übersetzers sind als solche gekennzeichnet und unterliegen ebenfalls dem Copyright des Übersetzers. Diese sind nicht Bestandteil des englischen Originaldokumentes.

Web Style Sheets
CSS Tips & Tricks

(Diese Seite verwendet CSS Style Sheets)

Zeilen

Blöcke

Vertikal

Demo

Horizontale und vertikale Zentrierung

Eine oft gestellte Aufgabe ist das Zentrieren von Texten oder Bilder. Es existieren dafür drei Möglichkeiten der Zentrierung:

Textzeilen zentrieren

Der am meissten gebrauchte und (von daher) einfachste Weg des Zentrierens ist das Zentrieren von Textzeilen in einem Absatz oder einer Überschrift. CSS bietet die Eigenschaft 'text-align' für diesen Zweck:

P { text-align: center }
H2 { text-align: center }

zentriert jede Zeile innerhalb eines P oder H2 Eementes, wie hier zu sehen:

Diese Zeilen werden alle zentriert dargestellt innerhalb der Abgrenzungen des P Eltern Elementes. Der Dank gilt dem Wert 'center' der CSS Eigenschaft 'text-align'.

Einen Textblock oder ein Bild zentrieren

Manchmal muss nicht der Text selbst zentriert werden, sondern vielmehr der gesamte Block inkl. des darin enthaltenen Textes. Oder anders ausgedrückt - wir möchten die rechten und linken margin Abstände gleich setzen. Um das zu erreichen vergeben wir den margin Eigenschaften den Wert 'auto'. Das wird normalerweise nur bei Blöcken fester Breite funktionieren da Blöcke mit automatischer Breite ebenso automatisch die gesamte verfügbare Breite des Anzeigebereiches für sich beanspruchen werden. Hier ein Beispiel:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">Dieser Beipiel...

Dieser Beispiel Block mit Text wurde zentriert. Achten Sie bitte darauf wie der eigentliche Text jedoch linhksbündig dargestellt wird - im Gegensatz zum vorhergehenden Beispiel.

Auf diese Weise können auch Bilder zentriert werden. Wir behandeln das Bild selbst als Blockelement und weisen ihm die entsprechenden margin Eigenschaften zu. Zum Beispiel:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Das folgende Bild ist zentriert: some random image

Einen Block oder Bild vertikal zentrieren

CSS2 besitzt keine Eigenschaft um Elemente vertikal zu zentrieren. Eventuell wird es das in CSS3 einmal geben. Aber selbst in CSS2 können Sie Blöcke durch die geschickte Kombination von Eigenschaften vertikal zentrieren. Der Trick dabei ist das aussenliegende Blockelement als Tabellenzelle zu formatieren weil alle Inhalte einer Tabellenzelle vertikal zentriert werden können.

Das folgende Beispiel zentriert einen Absatz innerhalb eines Blocks welchem eine bestimmte Höhe zugewiesen wurde. Ein anderes Beispiel zeigt einen Absatz welcher im Browserfenster vertikal zentriert wurde da der aussenliegende Block die gesamte Höhe des Browserfensters einnimmt.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>Dieser kleine Absatz...
</DIV>

Dieser kleine Absatz wurde vertikal zentriert.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 5 May 2001;
last updated $Date: 2007/05/07 04:19:32 $ GMT

IMPRESSUM