Text in React zentrieren

1. Text in React horizontal zentrieren
2. Text in React vertikal zentrieren

Wir werden verschiedene Wege nutzen, um Ihnen vorzustellen, wie man Text in React zentriert.

Text in React horizontal zentrieren

Wenn wir auf einer Seite arbeiten, müssen wir den Text rechts, links oder zentriert ausrichten. Es ist sehr einfach, Text in React mit der Eigenschaft textAlign innerhalb von style in der Datei index.tsx auszurichten.

# react
<div>
        <h2 style={{textAlign: "center"}}>Inline Styling</h2>
        <p style={{textAlign: "center"}}>
        This text is aligned center by adding inline css
        </p>
      </div>

Ausgabe:

Eine andere Möglichkeit, den Text für mehrere Elemente zu zentrieren, besteht darin, der Datei style.css einen css code hinzuzufügen.

Erstellen wir eine Überschrift mit dem Tag h2 und einen Absatz mit dem Tag p. Fügen Sie dann beiden Elementen eine Klasse von textCenter hinzu.

# react
<h2 className="centerText">Using Style.css</h2>
        <p className="centerText">This text is aligned center by adding css in style.css file</p>

Lassen Sie uns CSS-Code in die Datei style.css schreiben.

# react
.centerText{
  text-align: center;
}

Ausgabe:

Text in React vertikal zentrieren

Manchmal müssen wir Text vertikal ausrichten, damit er besser aussieht und unsere Benutzeroberfläche besser wird. Es gibt zwei einfache Möglichkeiten, Text in React vertikal zentriert auszurichten.

Lassen Sie uns eine Überschrift erstellen und sie vertikal zentrieren.

# react
<h2 style={{ flex: 1, justifyContent: 'center', alignItems:"center", lineHeight:"100px"}}>Aligning Vertically</h2>

Im obigen Code haben wir lineHeight: '100px' hinzugefügt, um anzuzeigen, dass der Text vertikal zentriert ist.

Ausgabe:

Wir können sehen, dass wir unseren Kurs erfolgreich vertikal zentriert haben.

Eine andere Möglichkeit, mehrere Elemente vertikal zu zentrieren, besteht darin, CSS-Code in die Datei style.css einzufügen und den Elementen eine class zuzuweisen.

Wir erstellen also zunächst eine Überschrift und einen Absatz und weisen beiden Elementen die Klasse verticalCenter zu.

# react
<h2 className="verticalCenter">Using Style.css</h2>
        <p className="verticalCenter">This text is vertically aligned center by adding css in style.css file</p>

Lassen Sie uns CSS-Code in die Datei style.css einfügen.

# react
.verticalCenter{
  flex: 1;
  justify-content: center;
  line-height: 100px; 
}

Ausgabe:

Wir können sehen, dass wir beide Elemente erfolgreich vertikal zentriert haben.