HTML Center Text - Vertikales Ausrichten eines Div

Programmierung

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 divin 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 leftwie 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-leftoder verwenden margin-rightund 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-alignist eine bequemere und spezifischere Möglichkeit, Text auszurichten. Es ermöglicht uns , den Text auf der platzieren centeroder auf die leftoder rightSeite, 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 FloatText ausrichten, können wir damit auch ein divElement ausrichten .

Floatmacht 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 Flexboxzu 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, mit display:flexdem wir uns bewerben Flexbox. Wir machen es also möglich, dass alle Kinder des Div innerhalb des Elternteils divmithilfe von FlexboxEigenschaften behandelt werden können .
  • Das   flex-directionnutzt die rowRichtung , die durch Standard, was bedeutet , dass die Elemente vertikal innerhalb des Behälters angeordnet werden.
  • Mit der justify-contentEigenschaft können wir die divKinder 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 divim Container ausrichten . Wir können immer align-selfein einzelnes Element ausrichten.

.container div{ align-self:center /* can have: flex-start, or flex-end*/ }

Wir können dasselbe auf einen Text anwenden Flexboxwie 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