text-align — Frontend Classroom

text-align es la propiedad CSS que controla cómo se alinea horizontalmente el contenido en línea — texto, imágenes en línea, elementos inline — dentro del contenedor de bloque que lo contiene. La alineación no actúa sobre el bloque mismo sino sobre el contenido que flota dentro de él: es el contenido el que se mueve, no la caja. Esto significa que para que text-align tenga efecto, el contenedor debe ser un elemento de bloque y debe tener espacio horizontal libre que distribuir.

Los cuatro valores clásicos cubren los casos de uso fundamentales de la composición tipográfica. left es el valor por defecto en idiomas con escritura de izquierda a derecha (LTR), como el español; right se usa en contextos específicos o en idiomas RTL; center aparece en encabezados, logos y elementos de UI simétricos; justify distribuye el espacio entre palabras para que cada línea llegue a los dos márgenes del contenedor. Cada uno tiene sus contextos de aplicación y sus trampas.

text-align se hereda. Declararlo en el <body> lo propaga a todos los párrafos, encabezados y elementos en línea de la página. Esto es útil para establecer el valor base, pero puede generar sorpresas cuando elementos anidados heredan una alineación que no deberían tener. Un .modal que hereda text-align: center del encabezado centra también los párrafos internos. Es buena práctica resetear explícitamente en los componentes que necesiten alineación distinta.

Cómo funciona

El navegador calcula el espacio disponible en cada línea (ancho del contenedor menos el contenido de esa línea) y lo distribuye según el valor de text-align. En left, el espacio libre queda a la derecha. En right, a la izquierda. En center, se divide a partes iguales. En justify, el espacio libre se distribuye entre las palabras de la línea; la última línea de un párrafo justificado no se justifica y queda alineada a la izquierda por defecto.

.titulo    { text-align: center; }
.parrafo   { text-align: justify; }
.pie-firma { text-align: right; }
.cuerpo    { text-align: left; }   /* valor explícito, aunque es el default */

text-align: left — alineado a la izquierda (por defecto)

text-align: center — centrado

text-align: right — alineado a la derecha

text-align: justify — el espacio entre palabras se distribuye para llegar a ambos márgenes en cada línea. La última línea no se justifica y queda alineada a la izquierda.

Sintaxis

selector {
  text-align: left | right | center | justify | start | end;
}

Valores

`left` — alineación a la izquierda

El contenido se alinea al borde izquierdo del contenedor. Es el valor inicial en documentos con dirección LTR (left-to-right), que es la gran mayoría de los sitios en español.

p { text-align: left; }

Cuándo usar: texto de cuerpo en español e idiomas LTR. También para resetear explícitamente cuando un elemento hereda center o right de un ancestro.

`right` — alineación a la derecha

El contenido se alinea al borde derecho del contenedor. El espacio libre queda a la izquierda.

.firma    { text-align: right; }
.precio   { text-align: right; }  /* en tablas de precios */

Cuándo usar: firmas, fechas, valores numéricos en columnas de tabla, elementos de UI donde la convención visual indica alineación derecha.

`center` — centrado

El contenido se centra horizontalmente en el contenedor. El espacio libre se divide en partes iguales a izquierda y derecha.

h1, h2    { text-align: center; }
.hero-cta { text-align: center; }

Cuándo usar: encabezados principales, llamadas a la acción (CTAs), elementos de UI simétricos, tarjetas de perfil. Evitarlo en texto de cuerpo largo: párrafos centrados son difíciles de leer porque el ojo no sabe dónde empieza cada línea.

`justify` — justificado

El espacio libre de cada línea se distribuye entre las palabras para que el texto llegue a ambos márgenes. La última línea no se justifica y queda alineada a la izquierda.

.articulo p { text-align: justify; }

Cuándo usar: artículos largos, libros digitales, maquetados con columnas estrechas — contextos donde la apariencia de “bloque sólido de texto” es deseable. En columnas anchas, justify puede generar ríos (franjas verticales de espacio en blanco que atraviesan el texto visualmente), especialmente sin separación silábica (hyphens: auto).

`start` y `end` — valores lógicos

start equivale a left en documentos LTR y a right en documentos RTL. end hace lo opuesto. Son los valores lógicos que se adaptan a la dirección de escritura del documento (direction / dir).

.multilingue { text-align: start; } /* izquierda en español, derecha en árabe */

Cuándo usar: en proyectos que deben soportar múltiples idiomas con distintas direcciones de escritura.

Cuándo usar qué

Contexto	Valor recomendado
Texto de cuerpo en español	`left` (default)
Encabezados centrados, CTAs	`center`
Valores numéricos en tablas	`right`
Artículos con columnas estrechas	`justify` + `hyphens: auto`
Proyecto multilingüe con RTL	`start` / `end`

Notas, gotchas e interacción

text-align no mueve el elemento de bloque. Centra el contenido dentro del bloque, no el bloque en la página. Para centrar una caja, usá margin: 0 auto (con ancho definido) o Flexbox/Grid.
justify y los “ríos”. En columnas anchas sin hyphens: auto, justify genera espacios desiguales entre palabras que el ojo humano percibe como “ríos” verticales de blanco. La solución es hyphens: auto para habilitar la separación silábica automática, o simplemente usar left.
No aplica a display: inline. text-align solo tiene efecto en elementos de bloque o inline-block. Un <span> sin cambio de display no va a centrar su contenido por más que le declares text-align: center.
Herencia y componentes. Si establecés text-align: center en un <header>, todos los hijos heredan ese valor. Los elementos dentro de ese header — incluyendo los <nav> y los <p> de descripción — también quedan centrados. Es una de las propiedades heredadas que más sorpresas genera en proyectos con muchos componentes anidados.
La última línea de justify. Por defecto, la última línea de un bloque justificado queda alineada a la izquierda. Podés cambiar esto con text-align-last: justify, pero rara vez es deseable: una última línea con una sola palabra estirada a todo el ancho se ve mal.

Vigente / legacy

text-align existe desde CSS1 y está completamente vigente. Los valores start y end son más recientes (CSS Text Level 3) y tienen soporte amplio en navegadores modernos. No hay valores legacy.

Aprendelo en el recorrido

Esta propiedad se trabaja en el módulo Tipografía y texto, lección Espaciado y alineación.