Wie kann ich Text in einem DIV zentrieren?

Entwickler können beim Entwerfen von Webseiten verschiedene Komponenten hinzufügen, einschließlich Bildern, Text, Tabellen und anderen. Darüber hinaus kann Text in einem DIV unter Verwendung mehrerer CSS -Eigenschaften in der Mitte ausgerichtet werden. Die beliebteste Methode zum horizontalen Zentrieren von Text besteht darin, die zu verwendenTextausrichtung”Attribut. Darüber hinaus können Sie auch die „verwenden“Zeilenhöhe" Und "vertikaler Ausrichtung”Attribute für vertikal ausrichten des Textes.

In diesem Beitrag wird die Methode angegeben, um den Text vertikal und horizontal in einem Div zu zentrieren.:

So zentrieren Sie Text horizontal in einem Div?

Um Text horizontal in einer DIV zu zentrieren, lesen Sie die angegebene Prozedur.

Schritt 1: Machen Sie einen DIV -Behälter

Erstellen Sie zunächst einen DIV -Behälter mit Hilfe des “" Element. Dann einfügen eine “Ausweis”Attribut im DIV -Eröffnungs -Tag. Begen Sie danach einen Text in das Div -Tag ein:

LinuxHint ist eine der besten Websites für die Erstellung von Inhalten.

Ausgang

Schritt 2: Zugriff auf Div -Container zum Mitte -Ausrichtung des Textes

Greifen Sie nun mit Hilfe des “auf den Div -Behälter zu"Ausweis"Attributname mit Selektor"#Und wenden Sie die folgenden CSS -Eigenschaften an:

#Align-Content
Breite: 80%;
Rand: 0 Auto;
Polsterung: 20px;
Hintergrund: #C8EDF3;
Text-Align: Mitte;
Farbe: RGB (49, 15, 240);

Hier:

• • “BreiteDie Eigenschaft wird verwendet, um die Breite des Containers festzulegen.
  • “RandGibt einen leeren Raum außerhalb des Containers an.
  • “Polsterung”Definiert einen Raum innerhalb der Grenze des Elements.
  • “Hintergrund”Legt die Hintergrundfarbe auf der Rückseite des Elements fest.
  • “TextausrichtungDie Eigenschaft wird verwendet, um die Ausrichtung des Textes als „als“ festzustellenCenter”.
  • “FarbeGibt eine Farbe für den Text innerhalb der Grenze an.

Es kann beobachtet werden, dass wir horizontal erfolgreich ausgerichteten Text in der geschaffenen Div: Div: ausgerichtet haben:

Wie man den Text vertikal in einem DIV zentriert?

Befolgen Sie die angegebenen Anweisungen, um den Text vertikal in einem Div -Container zu zentrieren.

Schritt 1: Greifen Sie auf den Div -Container zu

Greifen Sie zunächst auf den erstellten Div -Container zu.

Schritt 2: Wenden Sie CSS -Eigenschaften auf den zentralen Text vertikal an

Wenden Sie dann die unten aufgeführten CSS -Eigenschaften in einem DIV auf den Zentrum von Text an

#Align-Content
Anzeige: Tabellenzelle;
Breite: 300px;
Höhe: 150px;
Polsterung: 10px;
Farbe blau;
Hintergrundfarbe: RGB (248, 215, 166);
Grenze: 3px gestrichelt #f09d03;
vertikaler Align: Mitte;

Nach dem obigen Code -Snippet:

• • Setzen Sie die “Anzeige"Das gibt das Anzeigverhalten des Elements als" an "an"Tischzelle”, Was bedeutet, dass es wie die Zelle der Tabelle im Divelelement wirkt.
  • “Breite”Eigenschaft gibt die Elementbreitengröße an.
  • “Höhe”Legt die Höhe des Elements fest.
  • “Polsterung”Definiert einen leeren Raum innerhalb des Elements.
  • “Farbe”Wird verwendet, um die Farbe des Textes innerhalb des Elements festzulegen.
  • “HintergrundfarbeGibt die Farbe der Rückseite des Elements an.
  • “GrenzeEigenschaft definiert eine Grenze für ein Element.
  • “vertikaler Ausrichtung„Eigenschaft wird verwendet, um die vertikale Ausrichtung eines definierten Elements in das“ festzulegenMitte”.

Ausgang

Sie haben über das vollständige Verfahren gelernt, um den Text im Container auf beide Weise zu zentrieren, vertikal und horizontal.

Abschluss

Um den Text vertikal und horizontal in einem DIV zu zentrieren, erstellen Sie zunächst einen DIV -Container mit Hilfe des Elements und greifen Sie auf ihn zu, indem Sie den Selektor verwenden. Wenden Sie dann CSS -Eigenschaften an, in denen das “Textausrichtung„Eigenschaft wird zur horizontalen Ausrichtung verwendet und“vertikaler Ausrichtung”Setzt vertikale Ausrichtung. Dieser Beitrag hat die Methoden zum Zentrieren des Textes vertikal und horizontal in einem DIV gezeigt.