ProgramingWeb

Centrar texto css

Cuando escribimos una etiqueta cualquiera, es muy común que necesitemos centrar el texto dentro de ella, para lograr este objetivo en css existe la propiedad text-align que nos permitirá alinear el texto hacia el centro.

Para este ejemplo vamos a usar una etiqueta <h1> que por defecto viene con el texto alineado a la izquierda, centrarlo horizontalmente es muy fácil solo agregamos el siguiente código en el archivo css.

h1 {
  text-align : center;
}

El anterior código también aplica para centrar el texto en cualquier etiqueta como un p div o footer.

Centrar o alinear texto verticalmente con css

Para este ejercicio vamos a crear una etiqueta div con un texto aleatorio para luego centrar su contenido.

<div>
  Lorem ipsum dolor sit amet centrar texto css div consectetur adipisicing elit. Nihil maiores 
  quaerat autem, magni alinear texto css centro perferendis laudantium assumenda? 
  Praesentium dolorum quibusdam rem minima provident modi quisquam voluptas, ullam eum aliquam est sapiente!
</div>

En este ejemplo no usaremos la propiedas text-align: center; para centrarlo horizontalmente, alinearemos el contenido en ambos ejes usando css flexbox.

div{
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
}
  • Primero a la etiqueta div le asignamos una altura para poder observar como se centran los elementos.

  • Luego agregamos la propiedad display:flexpara usar flexbox, en este caso justify-content:center centra el contenido horizontalmente y alig-items:center verticalmente.

Como puedes ver centrar texto en css es mu fácil, Espero haberte ayudado y muchas gracias por leerme.