Content zentriert im Browserfenster anzeigen

16. Oktober 2022 | CSS-Stylesheet

Geschätzte Lesezeit für diesen Beitrag: ca. 3 Minuten.

Einen Websiteinhalt – sei es nun ein Bild, Text oder ein anderes Element – können Sie ganz einfach vertikal und horizontal zentriert im Browserfenster anzeigen. Bei Bedarf werden Sie sogar den Scrollbalken los, falls Sie dieser stört.

Am besten vergeben Sie dem zu zentrierenden Inhalt eine Klasse. In unserem Fall nennen wir diese einfach mal «center-content».

Dann sagen Sie noch, wie diese Klasse dargestellt werden soll. Dafür kopieren Sie den untenstehenden CSS-Code ins CSS-Stylesheet Ihrer Website – in WordPress unter Design/Customizer/Zusätzliches CSS:

.center-content {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
In unserem Fall setzen wir den Satz «Hier entsteht bald etwas neues.» vertikal und horizontal zentriert auf eine Seite. Das sieht dann so aus:

Wird der Browser verkleinert oder die Seite auf einem Mobilgerät betrachtet, wird der Text immer genau in der Mitte dargestellt.

Der verwendete CSS-Code unterdrückt auch gleich eine allfällige Bildlaufleiste im Browser. Wenn dies für Ihren Zwecks nicht gewünscht ist, entfernen Sie einfach die Zeile 6 aus dem CSS-Code.

Zusatztipp: Wenn Sie mehrere Elemente zentrieren wollen – etwa ein Logo, einen Titel und ein Formularfeld: alles mit einem <div>-Tag umschliessen und diesem die Klasse «center-content» zuweisen.

Und noch einer oben drauf: Wenn Sie die entsprechende Seite im Browser öffnen und dann «F11» drücken (beim Mac ist es die Kombination Control + Command + F), wechselt dieser in den Vollbildmodus. So verschwindet auch die Adresszeile und andere Elemente im Kopf des Browserfensters. Zurück in die Normaldarstellung gelangen Sie durch erneutes Drücken der «F11»-Taste.

 

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This