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 ⁨julio de 2015⁩.

* Some parts of this feature may have varying levels of support.

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

text-align: start;

text-align: end;

text-align: center;

text-align: justify;

<section id="default-example">
  <div id="example-element">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
  </div>
</section>

section {
  font-size: 1.5em;
}

#default-example > div {
  width: 250px;
}

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        |
  <string>      |
  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

Véase también

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

Help improve MDN

Learn how to contribute

This page was last modified on ⁨22 jul 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content