In der HTML- und CSS-Welt dreht sich alles um die Layoutstruktur und die Verteilung von Elementen. Normalerweise verwenden wir HTML, um das Markup und die Struktur zu definieren, während CSS uns bei der Gestaltung und Ausrichtung von Elementen hilft.
In diesem Beitrag lernen wir ein wenig über die verschiedenen Möglichkeiten, wie wir HTML-Elemente zentrieren und die vertikale Ausrichtung mit CSS handhaben können.
Zuerst lernen wir, wie man Text mit CSS ausrichtet.
Als nächstes werden wir uns mit dem Ausrichten eines Div und anderer Elemente befassen.
Und schließlich werden wir lernen, wie wir Text und a div
in einem Container zusammenfügen können.
So zentrieren Sie Text
Es gibt viele Möglichkeiten, Text mithilfe von CSS zu zentrieren.
Verwenden der Float-Eigenschaft
Float ist eine einfache Möglichkeit, Text auszurichten.
Um den Text auf der rechten Seite des Layouts zu platzieren, können wir ihn einfach right
als Wert für verwenden float
.
Um den Text auf der linken Seite zu platzieren, verwenden wir left
wie float:left
. Schauen Sie sich das folgende Beispiel an:
.right { float: right; } .left { float: left; } // HTML Right Left
Um den Text mit float zu zentrieren, können wir margin-left
oder verwenden margin-right
und ihn 50%
wie unten erstellen.
.center { float: left; margin-left: 50%; } /* HTML*/ Center
Hier erfahren Sie mehr über die Verwendung von Float
.
Verwenden von Textausrichtung
text-align
ist eine bequemere und spezifischere Möglichkeit, Text auszurichten. Es ermöglicht uns , den Text auf der platzieren center
oder auf die left
oder right
Seite, wie das folgende Beispiel zeigt:
.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ Right
Center
Left
Erfahren Sie mehr über text-align
.
So richten Sie a aus div
Nun, dafür gibt es viele Möglichkeiten.
Auf die gleiche Weise, wie wir Float
Text ausrichten, können wir damit auch ein div
Element ausrichten .
Float
macht den Job, aber CSS bietet uns bessere Optionen, die bequemer und eleganter sind. Hast du davon gehört Flexbox
? Oder CSS-Grid?
Nun, diese beiden Methoden bieten sehr moderne Möglichkeiten, um Ihr Layout in CSS auszurichten und damit zu arbeiten. Schauen wir uns Flexbox genauer an.
Flexbox
Flexbox bietet eine einfache und unkomplizierte Möglichkeit, a auszurichten div
- und es ist meine bisher beliebteste Methode, um Layouts in CSS zu verarbeiten (ich verwende sie jeden Tag).
Schauen wir uns an, was wir damit machen würden, um Flexbox
zu sehen, wie es funktioniert, indem wir dasselbe Beispiel wie oben neu erstellen.
Das Beispiel:
Der Code:
Flexbox .container { display: flex; } .container div { width: 33%; height: 60px; } .left { background: yellow; } .right { background: red; } .center { background: lightblue; } Left div centered div right div
Lass es uns zusammenfassen
- Wir definieren immer einen
div
Elternteil, mitdisplay:flex
dem wir uns bewerbenFlexbox
. Wir machen es also möglich, dass alle Kinder des Div innerhalb des Elternteilsdiv
mithilfe vonFlexbox
Eigenschaften behandelt werden können . - Das
flex-direction
nutzt dierow
Richtung , die durch Standard, was bedeutet , dass die Elemente vertikal innerhalb des Behälters angeordnet werden. - Mit der
justify-content
Eigenschaft können wir diediv
Kinder von a in verschiedene Richtungen ausrichten , wie im folgenden Beispiel:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
justify-content:center
Platziert die Elemente in der Mitte des Containers.justify-content:flex-start
Platziert die Elemente am Anfang des Containers links.justify-content:flex-end
Platziert Elemente am Ende des Containers auf der rechten Seite.justify-content:space-around
macht die Elemente in den Container passen und setzt eine gleiche Lücke zwischen allen Elementen.justify-content:space-evenly
verteilt die Elemente innerhalb des übergeordneten Containers gleichmäßig mit demselben Platz und derselben Breite.
Das obige Beispiel gilt für die untergeordneten Elemente aller Elemente als Gruppe.
Stellen Sie sich vor, wir möchten eine einzelne div
im Container ausrichten . Wir können immer align-self
ein einzelnes Element ausrichten.
.container div{ align-self:center /* can have: flex-start, or flex-end*/ }
Wir können dasselbe auf einen Text anwenden Flexbox
wie im folgenden Beispiel:
.right{ display: flex; align-items: flex-end; flex-direction: column; } right div
Dies ist ein großartiger Tweet von Julia Evans, der die Zentrierung in CSS im Allgemeinen veranschaulicht:

Einpacken
Es gibt viele Möglichkeiten, Elemente in CSS zu zentrieren. Und Sie werden im Laufe der Zeit immer neue Dinge lernen, wenn Sie mehr und mehr üben.
Ich empfehle Ihnen daher, einige Beispiele aus dem, was Sie heute gelernt haben, durchzuarbeiten, damit es bleibt.
- Du solltest mir Twitter folgen?
- Schauen Sie sich My Github an
- Besuchen Sie meinen Blog