Propriedade CSS text-align

A propriedade CSS text-align define o alinhamento horizontal do conteúdo inline dentro de um contêiner de bloco. Em termos simples, ela controla como o texto (e elementos inline como <a>, <img> ou <span>) se posiciona dentro de sua caixa pai: alinhado à esquerda, à direita, centralizado ou distribuído para preencher a linha.

Esta página aborda a sintaxe, cada valor e o que ele realmente faz, exemplos executáveis, armadilhas comuns e como text-align difere de centralizar um bloco em si.

Por que text-align não é o mesmo que centralizar uma caixa

Uma fonte frequente de confusão: text-align: center centraliza o conteúdo dentro de um bloco, não o bloco dentro de seu pai. A propriedade alinha o conteúdo inline em relação ao bloco que o contém — ela não move o bloco em si em relação ao elemento pai ou ao viewport.

Para centralizar horizontalmente um elemento de nível de bloco (como um <div> de largura fixa), você define uma largura e usa margens horizontais automáticas — consulte a propriedade margin. Use text-align quando quiser posicionar o texto dentro de um elemento; use margin: 0 auto quando quiser posicionar o elemento em si.

Informação

O alinhamento especificado com text-align não é em relação ao bloco pai ou ao viewport — ele posiciona o conteúdo inline dentro de seu próprio bloco.

Valor Inicial	left se a direção for "ltr", right se a direção for "rtl"
Aplica-se a	Contêineres de bloco.
Herdada	Sim
Animável	Não.
Versão	CSS1
Sintaxe DOM	object.style.textAlign = "right";

Sintaxe

Sintaxe da Propriedade CSS text-align

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

Exemplo da propriedade text-align com os valores "right" e "center":

Exemplo da Propriedade CSS text-align com os valores right e center

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-align: right;
      }
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Text-align property example</h2>
    <div>Example for the text-align property.</div>
    <p>Some paragraph for example.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade text-align com os valores "center", "left" e "justify":

Exemplo da Propriedade CSS text-align com os valores left, center e justify

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        text-align: center;
      }
      p.date {
        text-align: left;
      }
      p.example {
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Text-align property example</h2>
    <p class="date">March, 2019</p>
    <p class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

Experimente Você Mesmo »

Com justify, cada linha, exceto a última, é esticada para que suas bordas esquerda e direita se alinhem com as bordas da caixa; o navegador adiciona espaço extra entre as palavras para isso. Por isso, justify fica melhor em parágrafos largos com múltiplas linhas e pode criar lacunas estranhas em colunas estreitas.

Valores

A propriedade text-align aceita os seguintes valores:

Valor	Descrições	Experimente
left	Alinha o texto à esquerda. Este é o valor padrão desta propriedade.	Experimente »
right	Alinha o texto à direita.	Experimente »
center	Alinha o texto ao centro.	Experimente »
justify	Estende as linhas para que cada uma tenha a mesma largura.	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Notas e armadilhas comuns

Afeta apenas o conteúdo inline. text-align não tem efeito em um filho de nível de bloco que não seja inline. Para posicionar horizontalmente um bloco, defina uma largura e use margin: 0 auto, ou utilize um layout flex/grid.
É herdada. Como a propriedade é herdada, definir text-align: center no <body> é aplicado em cascata a todos os descendentes até que algo o substitua. Defina-a no elemento mais específico possível para evitar surpresas.
Respeita a direção de escrita. O valor inicial depende de direction: left para texto da esquerda para a direita (ltr) e right para texto da direita para a esquerda (rtl). Os valores lógicos start e end mapeiam para a borda inicial/final da linha, independentemente da direção.
Centralizando imagens. Como <img> é um elemento inline, text-align: center no bloco pai também centralizará a imagem — útil para centralização rápida de imagens sem Flexbox.
justify e a última linha. justify nunca estica a linha final de um parágrafo; essa linha mantém o alinhamento inicial natural. Controle-a separadamente com text-align-last.

Propriedades relacionadas

text-align-last — alinha a última linha de um bloco justificado.
text-indent — recua a primeira linha do texto.
text-justify — ajusta como justify distribui o espaço.
direction — define a direção do texto, que determina o alinhamento padrão.
vertical-align — alinha o conteúdo inline verticalmente (eixo perpendicular).

Prática

Quais dos seguintes são valores válidos para a propriedade 'text-align' em CSS?