A propriedade CSS text-align

Definição e uso

A propriedade text-align define o modo de alinhamento horizontal do texto dentro do elemento.

Esta propriedade define o modo de alinhamento horizontal do texto dentro de um elemento de bloco, ajustando a alinhamento do bloco com um ponto específico. Ao permitir que o agente de usuário ajuste o espaçamento entre letras e palavras no conteúdo das linhas, suporta o valor 'justify'; os resultados podem variar entre diferentes agentes de usuário.

Veja também:

Tutorial CSS:Texto CSS

Manual de referência HTML DOM:Propriedade textAlign

Exemplo

Defina o modo de alinhamento do texto para os elementos h1, h2, h3:

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

Experimente você mesmo

Sintaxe CSS

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

Valor do atributo

Valor Descrição
left Coloque o texto alinhado à esquerda. Valor padrão: decidido pelo navegador.
right Alinhar o texto à direita.
center Alinhar o texto no centro.
justify Realizar o efeito de texto alinhado em ambos os extremos.
inherit Determinar que o valor da propriedade text-align deve ser herdado do elemento pai.

O valor justify

O último atributo de alinhamento horizontal é justify, que traz seus próprios problemas.

O valor justify alinha os extremos do texto. No texto alinhado em ambos os extremos, os extremos das linhas de texto estão alinhados com os limites internos do elemento pai. Em seguida, ajusta o espaçamento entre as palavras e as letras para que a comprimento de todas as linhas seja exatamente igual. Você talvez já tenha notado que o texto alinhado em ambos os extremos é muito comum na impressão. No entanto, no CSS, é necessário fazer mais considerações.

Determinar como o texto alinhado em ambos os extremos deve ser esticado para preencher o espaço entre os limites esquerdo e direito do elemento pai. Por exemplo, alguns navegadores podem adicionar espaço extra entre as palavras, enquanto outros podem distribuir o espaço extra entre as letras de maneira uniforme (no entanto, a norma CSS destaca que, se) Propriedade letter-spacingEspecificar um valor de comprimento ("o agente de usuário não pode aumentar ou diminuir mais o espaço entre os caracteres")). Alguns agentes de usuário podem reduzir o espaço de algumas linhas, tornando o texto mais apertado. Todas essas práticas afetam a aparência do elemento, até mesmo mudando sua altura, dependendo de quanta linha de texto a escolha de alinhamento do agente de usuário afeta.

O CSS também não especifica como lidar com hífen (nota 1). A maioria dos textos alinhados em ambos os extremos usa hífen para dividir palavras longas em duas linhas, reduzindo o espaçamento entre as palavras e melhorando a aparência da linha de texto. No entanto, como o CSS não define o comportamento do hífen, os agentes de usuário não são muito prováveis de adicioná-lo automaticamente. Portanto, os textos alinhados em ambos os extremos parecem não impressos tão bem, especialmente quando os elementos podem ser muito estreitos, resultando em apenas algumas palavras por linha. Claro, usar elementos de design estreitos é possível, mas deve-se ter cuidado com as desvantagens correspondentes.

Nota 1:O CSS não especifica como lidar com hífen, pois diferentes idiomas têm regras de hífen diferentes. A norma não tenta conciliar essas regras provavelmente incompletas, mas simplesmente não menciona o problema.

Detalhes técnicos

Valor padrão: Se a propriedade direction for ltr, o valor padrão é left; se direction for rtl, é right.
Herança: sim
Versão: CSS1
Sintaxe do JavaScript: object.style.textAlign="right"

Mais exemplos

Alinhar texto
Este exemplo demonstra como alinhar texto.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

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