Atributo CSS text-align

definición y uso

La propiedad text-align especifica el alineamiento horizontal del texto dentro de un elemento.

Esta propiedad establece el alineamiento horizontal del texto dentro de un elemento de bloque especificando con qué punto de la caja de línea se alinea. Al permitir que el agente de usuario ajuste el espacio entre las letras y las palabras en el contenido de la línea, se puede soportar el valor justify; los diferentes agentes de usuario pueden obtener resultados diferentes.

Consulte también:

Tutorial de CSS:CSS texto

Manual de referencia de HTML DOM:propiedad textAlign

ejemplo

Establecer el alineamiento de texto de los elementos h1, h2, h3:

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

prueba personalmente

sintaxis de CSS

text-align: left|right|center|justify|initial|inherit;

valor de atributo

valor descripción
izquierda Alinear el texto a la izquierda. Valor predeterminado: decidido por el navegador.
correcto Alinear el texto a la derecha.
center Alinear el texto al centro.
justify Lograr el efecto de texto alineado a ambos lados.
inherit Heredar el valor del atributo text-align del elemento padre.

El valor justify

El último atributo de alineación horizontal es justify, que trae sus propios problemas.

El valor justify puede alinear los extremos del texto. En el texto alineado a ambos lados, los extremos de las líneas de texto se colocan en los bordes internos del elemento padre. Luego, ajustan el espacio entre las palabras y las letras para que la longitud de cada línea sea exactamente igual. Tal vez ya hayas notado que el texto alineado a ambos lados es común en el campo de impresión. Sin embargo, en CSS, se necesitan considerar más factores.

Dejar que el agente de usuario (en lugar de CSS) determine cómo estirar el texto alineado a ambos lados para llenar el espacio entre los bordes laterales del elemento padre. Por ejemplo, algunos navegadores pueden aumentar el espacio adicional entre las palabras, mientras que otros pueden distribuir el espacio adicional entre las letras de manera uniforme (aunque la norma CSS señala especialmente que si Atributo letter-spacingSe especifica como un valor de longitud ("el agente de usuario no puede aumentar o reducir el espacio entre caracteres de manera adicional"). Algunos agentes de usuario pueden reducir el espacio de ciertas líneas, haciendo que el texto se comprima más. Todas estas prácticas afectan el aspecto del elemento, incluso pueden cambiar su altura, dependiendo de cuántas líneas de texto elija el agente de usuario para alinear.

CSS tampoco especifica cómo manejar los guiones (nota 1). La mayoría de los textos alineados a ambos lados utilizan guiones para dividir las palabras largas en dos filas, reduciendo así el espacio entre las palabras y mejorando la apariencia de la línea de texto. Sin embargo, debido a que CSS no define el comportamiento de los guiones, los agentes de usuario no son muy probables para agregar automáticamente guiones. Por lo tanto, los textos alineados a ambos lados en CSS no se ven tan bien impresos, especialmente cuando los elementos pueden ser demasiado estrechos para contener solo algunas palabras en cada línea. Por supuesto, es posible usar elementos de diseño estrecho, pero hay que tener cuidado con las desventajas correspondientes.

Nota 1:CSS no especifica cómo manejar los guiones, ya que diferentes idiomas tienen diferentes reglas de guiones. La norma no intenta conciliar estas reglas probablemente incompletas, sino que simplemente no menciona este problema.

Detalles técnicos

Valor predeterminado: Si el atributo direction es ltr, el valor predeterminado es left; si direction es rtl, es right.
Herencia: sí
Versión: CSS1
Sintaxis de JavaScript: object.style.textAlign="right"

Más ejemplos

Alinear texto
Este ejemplo muestra cómo alinear texto.

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que admite completamente esta propiedad.

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5