Propiedad CSS text-align

La propiedad CSS text-align establece la alineación horizontal del contenido en línea dentro de un contenedor de bloque. En términos sencillos, controla cómo se posiciona el texto (y los elementos en línea como <a>, <img> o <span>) dentro de su caja padre: pegado al borde izquierdo, al borde derecho, centrado o estirado para ocupar toda la línea.

Esta página cubre la sintaxis, cada valor con su descripción, ejemplos ejecutables, errores comunes y cómo text-align se diferencia de centrar un bloque en sí mismo.

Por qué text-align no es lo mismo que centrar una caja

Una fuente frecuente de confusión: text-align: center centra el contenido dentro de un bloque, no el bloque dentro de su padre. La propiedad alinea el contenido en línea con respecto al bloque que lo contiene — no desplaza el bloque en sí con respecto a su elemento contenedor o al viewport.

Para centrar horizontalmente un elemento de bloque (como un <div> de ancho fijo), hay que darle un ancho y usar márgenes horizontales automáticos — consulta la propiedad margin. Usa text-align cuando quieras posicionar el texto dentro de un elemento; usa margin: 0 auto cuando quieras posicionar el elemento en sí.

Información

La alineación especificada con text-align no es respecto al bloque contenedor o al viewport — posiciona el contenido en línea dentro de su propio bloque.

Valor inicial	left si la dirección es "ltr", right si la dirección es "rtl"
Se aplica a	Contenedores de bloque.
Heredado	Sí
Animable	No.
Versión	CSS1
Sintaxis DOM	object.style.textAlign = "right";

Sintaxis

Sintaxis de la propiedad CSS text-align

text-align: left | right | center | justify | initial | inherit;

Ejemplo de la propiedad text-align con los valores "right" y "center":

Ejemplo de la propiedad CSS text-align con los valores right y center

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-align: right;
      }
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Text-align property example</h2>
    <div>Example for the text-align property.</div>
    <p>Some paragraph for example.</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad text-align con los valores "center", "left" y "justify":

Ejemplo de la propiedad CSS text-align con los valores left, center y justify

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        text-align: center;
      }
      p.date {
        text-align: left;
      }
      p.example {
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Text-align property example</h2>
    <p class="date">March, 2019</p>
    <p class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Con justify, cada línea excepto la última se estira para que sus bordes izquierdo y derecho coincidan con los bordes de la caja; el navegador añade espacio adicional entre palabras para lograrlo. Por eso justify queda mejor en párrafos amplios y de varias líneas, y puede generar espacios incómodos en columnas estrechas.

Valores

La propiedad text-align acepta los siguientes valores:

Valor	Descripción	Pruébalo
left	Alinea el texto a la izquierda. Es el valor predeterminado de esta propiedad.	Pruébalo »
right	Alinea el texto a la derecha.	Pruébalo »
center	Alinea el texto al centro.	Pruébalo »
justify	Extiende las líneas para que cada una tenga el mismo ancho.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Notas y errores comunes

Solo afecta al contenido en línea. text-align no tiene efecto sobre un elemento hijo de bloque que no sea en línea. Para posicionar un bloque horizontalmente, dale un ancho y usa margin: 0 auto, o emplea un diseño con Flexbox o grid.
Se hereda. Como la propiedad es heredada, establecer text-align: center en <body> se propaga a todos los descendientes hasta que alguno lo sobreescriba. Aplícalo en el elemento más específico posible para evitar sorpresas.
Respeta la dirección de escritura. El valor inicial depende de direction: left para texto de izquierda a derecha (ltr) y right para texto de derecha a izquierda (rtl). Los valores lógicos start y end se corresponden con el inicio/fin de la línea independientemente de la dirección.
Centrar imágenes. Como <img> es un elemento en línea, text-align: center en su bloque padre también centrará la imagen — útil para centrar imágenes rápidamente sin necesidad de Flexbox.
justify y la última línea. justify nunca estira la última línea de un párrafo; esa línea conserva la alineación de inicio natural. Contrólala por separado con text-align-last.

Propiedades relacionadas

text-align-last — alinea la última línea de un bloque justificado.
text-indent — aplica sangría a la primera línea del texto.
text-justify — ajusta con precisión cómo justify distribuye el espacio.
direction — establece la dirección del texto, que determina la alineación predeterminada.
vertical-align — alinea el contenido en línea verticalmente (el eje perpendicular).

Práctica

¿Cuáles de los siguientes son valores válidos para la propiedad 'text-align' en CSS?