text-align

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propiedad text-align de CSS establece la alineación horizontal del contenido a nivel de línea dentro de un elemento de bloque o caja de celda-tabla. Esto significa que funciona como vertical-align pero en dirección horizontal.

Pruébalo

Sintaxis

css

/* Valores clave */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;

/* Alineación basada en caracteres en una columna de la tabla */
text-align: ".";
text-align: "." center;

/* Valores de alineación de elementos de bloque (Sintaxis no estándar) */
text-align: -moz-center;
text-align: -webkit-center;

/* Valores globales */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: revert-layer;
text-align: unset;

La propiedad text-align se especifica de una de las siguientes maneras:

Utilizando los valores clave start, end, left, right, center, justify, justify-all, o match-parent.
Utilizando sólo un valor <string>, en cuyo caso el otro valor por defecto es right.
Utilizando tanto un valor de palabra clave como un valor <string>.

Valores

start: Lo mismo que left si la dirección es de izquierda a derecha y right si la dirección es de derecha a izquierda.
end: Lo mismo que right si la dirección es de izquierda a derecha e left si la dirección es de derecha a izquierda.
left: El contenido en línea se alinea con el borde izquierdo de la línea de la caja.
right: El contenido en línea se alinea con el borde derecho de la línea de la caja.
center: El contenido en línea se centra dentro de la línea de la caja.
justify: El contenido en línea está justificado. El texto debe ser espaciado para alinear sus bordes izquierdo y derecho con los bordes izquierdo y derecho de la línea de la caja, excepto la última línea.
justify-all Experimental: Igual que justify, pero también obliga a justificar la última línea.
match-parent: Similar a inherit, pero los valores start y end son calculados de acuerdo a la direction del padre y se sustituyen por el valor left o right apropiado.
<string> Experimental: Cuando se aplica a la celda de una tabla, especifica el carácter de alineación alrededor del cual se alineará el contenido de la celda.

Problemas de accesibilidad

El espaciado incoherente entre palabras que crea el texto justificado puede ser problemático para personas con problemas cognitivos como la dislexia.

Definición formal

Valor inicial	`start`, or a nameless value that acts as `left` if `direction` is `ltr`, `right` if `direction` is `rtl` if `start` is not supported by the browser.
Applies to	block containers
Heredable	yes
Valor calculado	as specified, except for the `match-parent` value which is calculated against its parent's `direction` value and results in a computed value of either `left` or `right`
Animation type	discrete

Sintaxis formal

text-align = 
  start         |
  end           |
  left          |
  right         |
  center        |
  justify       |
  match-parent  |
  justify-all

Ejemplos

Alineación Start

HTML

html

<p class="ejemplo">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css

.ejemplo {
  text-align: start;
  border: solid;
}

Resultado

Texto centrado

HTML

html

<p class="ejemplo">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css

.ejemplo {
  text-align: center;
  border: solid;
}

Resultado

Ejemplo usando "justify"

HTML

html

<p class="ejemplo">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css

.ejemplo {
  text-align: justify;
  border: solid;
}

Resultado

Especificaciones

Specification
CSS Logical Properties and Values Level 1 # text-align
CSS Text Module Level 3 # text-align-property

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también

margin: auto, margin-left: auto, vertical-align