Centrer le texte dans React

1. Centrer le texte horizontalement dans React
2. Centrer le texte verticalement dans React

Nous utiliserons différentes manières d’introduire comment centrer du texte dans React.

Centrer le texte horizontalement dans React

Lorsque vous travaillez sur une page, nous devons aligner le texte vers, à droite, à gauche ou au centre. Il est très facile d’aligner du texte dans React en utilisant la propriété textAlign dans style dans le fichier index.tsx.

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

Production :

Une autre façon de centrer le texte pour plusieurs éléments consiste à ajouter du code css dans le fichier style.css.

Créons un titre en utilisant la balise h2 et un paragraphe en utilisant la balise p. Ensuite, ajoutez une classe de textCenter aux deux éléments.

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

Écrivons du code CSS dans le fichier style.css.

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

Production :

Centrer le texte verticalement dans React

Parfois, nous devons aligner le texte verticalement pour le rendre plus beau et améliorer notre interface utilisateur. Il existe deux façons simples d’aligner le texte verticalement centré dans React.

Créons un titre et alignons-le verticalement au centre.

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

Dans le code ci-dessus, nous avons ajouté lineHeight: '100px' pour montrer que le texte est centré verticalement.

Production :

Nous pouvons voir que nous avons réussi à centrer verticalement notre cap.

Une autre façon de centrer plusieurs éléments verticalement consiste à ajouter du code CSS dans le fichier style.css et à attribuer une class aux éléments.

Donc, tout d’abord, nous allons créer un titre et un paragraphe et attribuer la classe verticalCenter aux deux éléments.

# 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>

Ajoutons du code CSS dans le fichier style.css.

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

Production :

Nous pouvons voir que nous avons réussi à centrer verticalement les deux éléments.