Características text-align en CSS

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 inicialstart, o un valor indefinido representará el valor left si es la orientación del objeto ltrright si es la orientación del texto rtl si el valor start no es compatible con el navegador.
Aplicado abloques de contenedores.
Heredable
MóvilNo
Valor calculadoTambié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 leftright.
/* 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ísticaChromeFirefoxIEOperaSafari
Soporte básico (izquierda, derecha, centro, justificar)1.01.03.03.51.0
Comienzo1.01.0No soportadosoportado3.1
Fin1.03.6No soportadosoportado3.1
Padre-pareja1640No soportadoNo soportadoNo 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.

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 startend se calculará según la dirección del elemento principal y luego se reemplazará por leftright.

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.