Texte oder Container horizontal oder vertikal zentrieren mit CSS und HTML

von | Mrz 13, 2023 | Design | 0 Kommentare

Schlagwörter: CSS - CSS3

Etwas womit viele Menschen Mühe haben ist das Einmitten von Texte oder ganze Container. Ja früher war das immer ein wenig kompliziert aber heute kann man das mit wenigen Code machen. Ich denke jetzt so ab 2022 sollte man sich wirklich mal mit der CSS Funktion von Display: Flex beschäftigen, denn damit kann man sowas wirklich einfach machen und es wird dann immer spannender – vorallem wenn ich an die Grids denke.

Heute zeige ich euch mal wie das ganze funktioniert und wie ihr Texte und ganze Container zentrieren könnt.

Video

Text-Align

Die alte Methode um Text einzumitten wäre:

1
text-align: center;

Horizontales Einmitten

Heute sollte man langsam sich mit Display Flex beschäftigen – so kann man nämlich noch besser und einfacher Texte einmitten.

1
2
display: flex;
justiy-content: center;

Horizontales & Vertikales Einmitten

Will man jetzt also noch einen Text auch noch in der vertikale einmitten, dann kann man den anderen Code einach erweitern.

1
2
3
display: flex;
justiy-content: center;
align-items: center;

Container Horizontales & Vertikales Einmitten

Will man nun sogar noch den Container in der Seitenmitte also auch horizontal und vertikal Einmitten, dann kann man den Code noch mehr erweitern.

1
2
3
4
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert