Zentrierte Bildschirmausgabe

Eine Zentrierte Bildschirmausgabe ist vor allem bei 16/9-formatigen Bildschirmen sinnvoll. Sie entlastet das Auge, das sich auf zu breiten Bildschirmen "verliert".

Definieren der Bildschirmbreite

Zunächst wird die Breite der Bildschirmausgabe mit width definiert. Die Angabe der Breite lässt sich pixelgenau festlegen. Relative Angaben sind hier aber besser, da sie unterschiedliche physikalische Breiten des Ausgabefensters besser berücksichtigen.

Unterschiedliche Bildschirm-Formate können mit Media-Queries berücksichtigt werden. So ist eine optimal angepasste Formatierung der Ausgabe mit relativ einfachen Mitteln möglich.

Zentrieren des Ausgabebereichs

Die zentrierte Ausrichtung erfolgt dann über die Definition der Seitenränder durch die margin Eigenschaft.

Folgende Regel ergibt eine zentrierte Ausgabe des <body> Bereichs:

body { width: 70%; margin-left: auto; margin-right: auto; }

Mit width: 70%; wird der Ausgabebereich auf 70% der Gesamtbreite des Fensters reduziert.
Mit margin-left: auto; wird der linke Seitenrand automatisch aufgefüllt.
Mit margin-right: auto; wird der rechte Seitenrand automatisch aufgefüllt.

Die Kombination der beiden letztgenannten Deskriptoren ergibt die zentrierte Ausgabe.