Características text-align en CSS

Una propiedad text-align en CSS que describe cómo los elementos en línea, como el texto, se alinean en contenedores de bloques. Tenga en cuenta que la propiedad text-align no controla la alineación de los elementos del bloque, sino la alineación del contenido en línea dentro de ellos.

Funciones text-align css

Valor inicial	`start`, o un valor indefinido representará el valor `left` si es la orientación del objeto `ltr` y `right` si es la orientación del texto `rtl` si el valor `start` no es compatible con el navegador.
Aplicado a	bloques de contenedores.
Heredable	Sí
Móvil	No
Valor calculado	También se especifica, a excepción de la palabra reservada `match-parent`, que buscará en la dirección del elemento padre y se convertirá al valor `left` o `right`.

/* Palabras reservadas */ 
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;
/* valores globales */ 
text-align: inherit;
text-align: initial;
text-align: unset;

Ejemplos y aplicaciones en código

Un ejemplo del uso de todas las palabras reservadas admitidas en una propiedad text-align, y repetiremos cada ejemplo dos veces, una en un párrafo en inglés (dirección de texto de izquierda a derecha) y una vez en un párrafo con texto de derecha a izquierda dirección:

< p  class = "start"  dir = "ltr" > Probando < code > text-align: start </ code > </ p > 
< p  class = "start"  dir = "rtl" > < code > text-align : inicio </ code > </ p > 
< hr >

< p  class = "end"  dir = "ltr" > Prueba de < code  > alineación de texto: final </ code  > </ p > 
< p  class = "end"  dir = "rtl" > < code > alineación de texto : fin </ code > </ p > 
< hr >

< p  class = "left"  dir = "ltr" > Probando < code > text-align: left </ code > </ p > 
< p  class = "left"  dir = "rtl" > < code  > text-align : izquierda </ code  > </ p > 
< hr >

< p  class = "right"  dir = "ltr" > Prueba de < code  > alineación de texto: derecha </ code  > </ p > 
< p  class = "derecha"  dir = "rtl" > < code  > alineación de texto : derecha </ code  > </ p > 
< hr >

< p  class = "center"  dir = "rtl" > < code  > text-align: center </ code > </ p > 
< p  class = "center"  dir = "ltr" > Prueba < code > text-align : centro </ code  > </ p > 
< hr >

< p  class = "justify"  dir = "ltr" > Prueba de < code > text-align: justify </ code > . El texto debe estar espaciado para alinear sus bordes izquierdo y derecho con los bordes izquierdo y derecho del cuadro de línea, excepto por la última línea. </ p > 
< p  class = "justify"  dir = "rtl" > < code  > alinear texto: justificar </ code  >. El navegador intentará llenar toda la línea de texto desde el borde izquierdo hasta el borde derecho del cuadro de línea, excepto la última línea. </ p > 
< hr >

< div  dir = "rtl" > < p  class = "match-parent"  dir = "ltr" > Prueba de < code > text-align: match-parent </ code > </ p > </ div > 
< div  dir = "ltr" > < p  class = "match-parent"  dir = "rtl" > < code  > text-align: match-parent </ code  > </ p > </div >

Código CSS:

p {
  background-color: #f8f9fa;
  border: 1px solid #eaecf0;
  padding: 1em;
  margin: 1em;
}
.end { text-align: end; }
.left { text-align: left; }
.right { text-align: right; }
.start { text-align: start; }
.center { text-align: center; }
.justify { text-align: justify; }
.match-parent { text-align: match-parent; }

Observe en el último ejemplo cómo la dirección del elemento padre es opuesta a la dirección del elemento al que se aplica la regla text-align: match-parent. Vale la pena señalar que es match-parent posible que la función no funcione en todos los navegadores (incluso en los modernos), y se -webkit-debe usar un precedente como con ella.

Soporte de navegadores

Característica	Chrome	Firefox	IE	Opera	Safari
Soporte básico (izquierda, derecha, centro, justificar)	1.0	1.0	3.0	3.5	1.0
Comienzo	1.0	1.0	No soportado	soportado	3.1
Fin	1.0	3.6	No soportado	soportado	3.1
Padre-pareja	16	40	No soportado	No soportado	No soportado

Características generales

La propiedad acepta text-alignuna de las siguientes palabras reservadas.

start

La palabra reservada se comporta left si la orientación del objeto es de izquierda a derecha y se comporta right si la orientación del objeto es de derecha a izquierda.

end

La palabra reservada se comporta right si la orientación del objeto es de izquierda a derecha y se comporta left si la orientación del objeto es de derecha a izquierda.

left

Los elementos de línea se alinearán con el borde izquierdo del cuadro de línea.

right

Los elementos de línea se alinearán con el borde derecho del cuadro de línea.

center

Las líneas de pedido se alinearán en el medio del cuadro de línea.

justify

El navegador intentará llenar toda la línea de texto desde el borde izquierdo hasta el borde derecho del cuadro de línea, excepto la última línea.

justify-all

Igual que justificar, pero la última línea llenará el cuadro en línea.

match-parent

Sin embargo inherit, es similar a la palabra reservada start y end se calculará según la dirección del elemento principal y luego se reemplazará por left o right.

Estructura text-align css

text-align: start | end | left | right | center | justify | match-parent;

Consulte también

La página de propiedades text-align-last que describe cómo se alinea la última línea de texto.
Página de propiedades right que ayuda a determinar la posición horizontal correcta de un elemento que se puede reposicionar.
La página de propiedades left que define la posición horizontal izquierda de un elemento que se puede reposicionar.