Centrar texto en React

1. Centrar texto horizontalmente en React
2. Centrar texto verticalmente en React

Usaremos diferentes formas de presentar cómo centrar el texto en React.

Centrar texto horizontalmente en React

Al trabajar en una página, tenemos que alinear el texto hacia la derecha, la izquierda o el centro. Es muy fácil alinear texto en React usando la propiedad textAlign dentro de style en el archivo 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>

Producción:

Otra forma de centrar el texto para múltiples elementos es agregando código css en el archivo style.css.

Vamos a crear un encabezado usando la etiqueta h2 y un párrafo usando la etiqueta p. Luego, agregue una clase de textCenter a ambos elementos.

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

Escribamos código CSS en el archivo style.css.

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

Producción:

Centrar texto verticalmente en React

A veces tenemos que alinear el texto verticalmente para que se vea mejor y mejore nuestra interfaz de usuario. Hay dos formas simples de alinear el texto verticalmente al centro en React.

Vamos a crear un encabezado y alinearlo verticalmente al centro.

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

En el código anterior, hemos agregado lineHeight: '100px' para mostrar que el texto está centrado verticalmente.

Producción:

Podemos ver que hemos centrado verticalmente con éxito nuestro encabezado.

Otra forma de centrar varios elementos verticalmente es agregar código CSS en el archivo style.css y asignar una class a los elementos.

Entonces, antes que nada, crearemos un encabezado y un párrafo y asignaremos la clase verticalCenter a ambos elementos.

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

Agreguemos código CSS en el archivo style.css.

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

Producción:

Podemos ver que hemos centrado verticalmente con éxito ambos elementos.