Sie möchten ein Element horizontal zentrieren? Es gibt mehrere Möglichkeiten, dies mit CSS umzusetzen. Im Folgenden werden drei Methoden zur horizontalen Zentrierung von Elementen erläutert.
Sie können die folgenden Methoden im originalen CSS umsetzen und benötigen kein externes Framework oder Ähnliches.
1. Methode: Text-align
Die Eigenschaft text-align wird häufig verwendet, um Elemente innerhalb eines Containers zu zentrieren, z. B. ein Blockelement. Um ein Element horizontal zu zentrieren, setzen Sie die text-align-Eigenschaft des übergeordneten Containers auf „center“. Hier ist ein Beispiel:
<div style="text-align:center;">
<p>I am centered horizontally.</p>
</div>
2. Methode: Margin
Eine andere Möglichkeit, ein Element horizontal zu zentrieren, besteht darin, die linken und rechten Ränder – also den Außenabstand/die margin – auf „auto“ zu setzen. Diese Methode funktioniert bei Elementen, die eine feste Breite haben. Fügen Sie dazu dem Element das folgende CSS hinzu:
<div style="width: 50%; margin: 0 auto;">
<p>I am centered horizontally.</p>
</div>3. Methode: Flexbox
Flexbox ist ein Layout-Modell in CSS, mit dem sich Elemente leicht horizontal und vertikal ausrichten lassen. Um ein Element mithilfe von Flexbox horizontal zu zentrieren, müssen Sie den übergeordneten Container auf display: flex einstellen und dann die Elemente innerhalb des Containers mithilfe der Eigenschaften justify-content (horizontal) und align-items (vertikal) ausrichten. Hier ist ein Beispiel:
<div style="display: flex; justify-content: center; align-items: center;">
<p>I am centered horizontally and vertically.</p>
</div>
Glückwunsch – Sie können jetzt Elemente in CSS zentrieren!
