Trick # 172 | Dieser Beitrag beinhaltet 510 Wörter. – Geschätzte Lesezeit: 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;
}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
