CSS text-align propiedad para alinear el texto de una etiqueta html

actualizado: 04 / 02 / 2022

La propiedad text-align en css se usa para alinear horizontalmente el contenido de un elemento html, Esta propieda solo funciona si se aplica a elementos de bloque, si necesitas alinear el texto de una etiqueta inline como strong o span antes debes convertirlo a un elemento de bloque usando la propiedad display:block;

Propiedad text-align: center;

la regla css text-align : center; como su nombre lo indica te permite centrar el texto de forma horizontal dentro de la linea.

En el siguiente ejemplo usamos la propiedad text-align: center; para centrar un título en las etiquetas h1 y h2.

css/* text-align:center;  en etiquetas h para títulos*/

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

cssp {
  text-align: center;
}
div {
  text-align: center;
}

Centrar los encabezados es una tarea muy común así que esta propiedad de css te será muy útil en varias ocasiones.

Alinear el texto a la derecha con text-align: right;

con text-align : right; colocaremos el texto hacia la derecha de la pantalla. Mira el siguiente ejemplo de como usar la propiedad text-align: right;

cssh1 {
  text-align: right;
}

h2 {
  text-align: right;
}

p {
  text-align: right;
}

Texto en la parte izquiera de la pantalla con text-align: left;

Este es el valor por defecto que trae la propiedad text-align, en todo caso si por alguna razón tienes que alinear tu texto a la izquierda con respecto a otro puedes hacerlo con el siguiente código.

cssh1 {
  text-align: left;
}

h2 {
  text-align: left;
}

p {
  text-align: left;
}

text-align: justify;

En muchas ocasiones necesitarás justificar el texto de tu página web, por ejemplo si estás desarrollando para un periódico es común que justifiquen el texto ya que esto le da un caracter formal a la escritura. Para hacerlo en puedes usar la propiedad text-align: justify;

html<p>
  La propiedad text-align: justify, te permite justificar el texto de tus
  páginas para dar un aspecto más formal a tu contenido.
</p>

cssp {
  text-align: justify;
}