Propriedade CSS text-align: guia completo com exemplos e suporte

Início » Python » Propriedade CSS text-align: guia completo com exemplos e suporte

Ao trabalhar com maquiagem na web, controlar como distribuir o texto em um bloco é fundamental e ele entra no jogo de propriedade text-align. Esta regra CSS determina o alinhamento horizontal do conteúdo on-line dentro de um elemento contêiner, e é chave para organizar parágrafos, títulos, menus ou chamadas na ação com um estilo coerente e legível.

Além das opções clássicas como esquerda, certo, centro y justificar, hoje contamos com valores lógicos que se adaptam à direção do texto, como começo, final o el interesante correspondência-pai. Estas variantes facilitam a internacionalização (LTR/RTL) e evite reescrever estilos quando mudar os idiomas ou a direção da escrita.

O que é text-align e para que servir

A propriedade text-align especifica la alinhamento horizontal do conteúdo on-line que vive dentro de um elemento de bloco (ou elementos com comportamento semelhante). Não central e desplaza o próprio bloco (para isso há outras técnicas), só que controle como se alinham as linhas de texto e outros elementos inline/inline-block em seu interior.

Na prática, se aplica text-align para uma <div> ou para um <section>, afeta o texto e tudo o que está inline ou inline-block dentro deste conteúdo: links, ícones embutidos, imagens com display: inline, e elementos similares. Por sua vez, os descendentes podem herdar este valor e, se necessário, podem sobrescrevê-lo em níveis inferiores.

Um detalhe importante é que, na maioria dos idiomas que são escritos de izquierda a direita (LTR), o valor por defeito de text-align es esquerda. Quando o documento ou o conteúdo está na direita para fora (RTL), o comportamento por defeito cambia e o alinhamento natural passa a ser certo. Por isso é útil conhecer valores lógicos como começo y final.

Sintaxe básica e valores disponíveis

A forma de uso é muito direta: aplica o valor desejado ao seletor do conteúdo que engloba o conteúdo alinear. Aqui você tem a sintaxe geral e os valores mais habituais:

/* Sintaxis general */
selector {
  text-align: left | right | center | justify | start | end | match-parent | initial | inherit;
}

Valores clássicos que você pode encontrar em qualquer projeto: esquerda (alinhamento à esquerda), certo (à direita), centro (centrado) e justificar (márgenes alineados repartiendo espaço entre palavras). São os mais estendidos e ampliamente suportados pelos navegadores.

Além disso, CSS incorpora valores lógicos e muito úteis: começo y final se adapta a LTR/RTL sem ter que mudar de estilo; correspondência-pai calcula o alinhamento em função da direção do elemento atual e seu pai; herdar força a herencia do valor do pai; e do estado inicial, restabeleça o valor ao padrão padrão. Esses valores facilitam a internacionalização e a manutenção.

Há também especificado, mas também comportou-se sem apoio nos navegadores, siga a especificação: por exemplo, combinar inicio fim para alinhar a primeira linha de um modo e o resto de outro, o alinear por uma cadeia com uma sintaxe do tipo text-align: "." start; para, por exemplo, números lineares para o separador decimal. Son ideas interessantes ainda sem inovações na prática.

Como se aplica a diferentes tipos de elementos

text-align atua sobre o conteúdo inline del contenedor (texto, inline-blocks, imagens inline, etc.). Se você quiser centralizar um elemento embutido, pode bastar que o conteúdo tenha text-align: center;. Em mudança, para centralizar o próprio contêiner de bloco necessita de outras técnicas (por exemplo, margin: 0 auto; com uma âncora definida) ou usar sistemas de layout modernos como Flexbox ou Grid.

Se você é um elemento estritamente em linha (como um <span>) e você quer aplicar um text-align especificamente, lembre-se de que esta propriedade não se aplica “diretamente” ao corredor embutido; o bem atuante em seu contêiner de blocoum converte esses inline em bloco usando algo como display: block para que você possa alinhar seu conteúdo com text-align.

/* Opción 1: Alinear desde el contenedor */
.contenedor {
  text-align: right;
}

/* Opción 2: Convertir el inline en bloque */
span.convertido {
  display: block;
  text-align: right;
}

Lembre-se também disso text-align não está pensado para alinhar verticalmente. Para o alinhamento vertical do conteúdo inline existem valores de vertical-align, e para blocos ou layouts completos, Flexbox o Grade são a opção preferida.

Casos de uso freqüentes e exemplos

Un uso muy común es la alinhamento de encabezados e párrafos de uma seção. Por exemplo, centralizar um título pode dar mais ênfase visual, enquanto um párrafo justificado aporta um acabamento com retos retos em ambos os lados, no estilo de revistas e jornais. Escolha de acordo com o tom do conteúdo e a legibilidade.

h1 {
  text-align: center;
}
.articulo p {
  text-align: justify;
}

Em uma Barra de navegação você pode optar por um centro se quiser uma estética equilibrada e visível em telas grandes. Funciona muito bem em sites corporativos ou landing pages que buscam simetría.

.nav {
  text-align: center;
}
.nav a {
  display: inline-block;
  padding: .5rem 1rem;
}

No rodapés é habitual alinhar certos blocos à direita para distinguir os fluxos principais do texto; por exemplo, dados do autor, links legais ou ícones de redes. Este contraste ajuda a separar imagens visuais.

footer .meta {
  text-align: right;
}

En apelos à ação (CTA) centrado, a mensagem se destaca rapidamente e facilita o clique no celular. Você pode combinar um fundo de chamada com texto centralizado para criar um bloco que capte a atenção. El centrado refuerza la jerarquía del CTA.

.cta {
  text-align: center;
  background: #f5f5f5;
  padding: 1.5rem;
}

Valores lógicos: start, end e match-parent

Com idiomas LTR como espanhol ou inglês, começar equivalente a um esquerdo y fim equivalente a um direito. Em textos RTL (árabe, hebraico), início é à direita e fim é à esquerda. Deste modo, seu CSS se adapta automaticamente à direção do texto sem duplicar regras.

/* Se adapta a LTR y RTL */
.card__title {
  text-align: start;
}

.card__meta {
  text-align: end;
}

O valor que correspondência-pai é similar a herdar, mas calcula o resultado em função do direção do elemento real e seu pai. É útil quando há combinações de direções e precisa manter consistência sem forçar valores absolutos.

Justificado: considerações de legibilidad

Usar alinhamento de texto: justificar; cria máximos retos em ambos os lados repartindo espaços entre palavras. Queda muy “editorial”, mas conviene cuidar da medida da linha e do interletrado para evitar “ríos” visuais, sobre tudo em colunas estrechas.

.cuerpo-texto {
  text-align: justify;
  hyphens: auto; /* para mejorar saltos de línea en idiomas compatibles */
}

Existe um método de implementação: alguns navegadores, como o Firefox, você pode gerenciar o espaço ao abrigo de uma forma ligeiramente distinta do Chrome ou Safari. Não é um erro, nenhuma diferença de motor. Se o fundamento for crítico para o seu design, experimente em vários navegadores.

text-align-last: controla a última linha

Quando justifica ou alinha blocos complexos, você pode ter interesse em indicar como se alinea la última linha de um párrafo. Ahí entra text-align-last, que admite valores como auto, esquerda, certo, centro, justificar, começo y final. Permite refinar o remate do párrafo.

.parrafo {
  text-align: justify;
  text-align-last: center; /* la última línea se centra */
}

O valor que auto suele explicativa e alinear à la izquierda em contextos LTR, enquanto começo y final respeita a direção do texto. É uma forma fina de controlar o ritmo do párrafo sin romper la estética geral.

Direção de texto e combinação com Unicode-bidi

A propriedade direction definir o direção de dentro de um elemento: LTR ou RTL. Em combinação com unicode-bidi lata forzar o anidar direcciones em textos com vários idiomas. É especialmente útil em interfaces multilíngues ou quando inserir termos árabes dentro de um parágrafo em espanhol.

.bloque-rtl {
  direction: rtl;           /* establece escritura derecha a izquierda */
  unicode-bidi: embed;      /* ajusta el comportamiento de anidado */
  text-align: start;        /* se alineará a la derecha en RTL */
}

combinador direção com valores lógicos de text-align ahora condicionais e hojas alternativas. A maquiagem se tornou mais robusta diante das mudanças de idioma.

Alinhamento vertical: alinhamento vertical e alternativas

Não há que confundir conceitos: alinhamento de texto solo alinhado na horizontalPara vertical, CSS oferece vertical-align dentro do contexto de conteúdo inline e células de tabela. Não sirve para centralizar blocos completos, mas sim para ajustar a linha base ou a colocação vertical relativa.

valores de vertical-align que você pode usar: baseline (padrão), abaixo, grande, topo, topo do texto, meio, fundo, texto inferior, Plus longitudes e porcentagens para desplazar respeito à linha base. São muito úteis para ícones embutidos, superíndices ou tabelas.

• baseline: alinea com a linha base do pai.
• abaixo / grande: simula subíndices e superíndices.
• topo / fundo: fica alinhado com o elemento mais alto/baixo da linha.
• topo do texto / texto inferior: se alinea com a parte alta/baixa da fonte do padre.
• meio: centro aproximadamente em relação à altura x; útil com ícones.
• longitudes/%: ajusta deslocamentos finos.

Para centrar verticalmente blocos completos, é mais eficaz usar Flexbox o Grade CSS. São sistemas projetados para layouts e resolvem esses casos de forma confiável en cualquier viewport.

.centro-vertical {
  display: flex;
  align-items: center;   /* centrado vertical */
  justify-content: center; /* opcional: centrado horizontal */
}

Herencia, alcance e como sobrescrever

Os elementos filhos suelen alinhamento de texto heredar do contêiner. Se em um <div> pones text-align: center;, todos os seus parágrafos e inline tienden a centralizar também. Para romper esa herencia, estabelece um valor distinto no elemento hijo.

.padre {
  text-align: center;
}
.padre .hijo {
  text-align: left; /* sobrescribe la herencia */
}

Com combinadores e seletores de maior especificidade você pode ajustar alinhamentos em nós concretos: por exemplo, alinhar à direita apenas os últimos elementos de uma lista dentro de um bloco centralizado. O controle fino se logra combinando seletores corretamente.

.lista {
  text-align: center;
}
.lista li:last-child {
  text-align: right;
}

Design responsivo e consultas de mídia

Es habitual cambiar la alineación segundo o ancho de pantalla: centrado no celular para facilitar a leitura e o toque, alinhado à esquerda do escritorio para um estilo mais tradicional. Com consultas de mídia que são automatizadas sem duplicação de HTML.

.cabecera {
  text-align: center;
}
@media (min-width: 768px) {
  .cabecera {
    text-align: left;
  }
}

Também é possível centralizar títulos e botões em vistas pequenas e colocá-los em inicio fim em layouts RTL/LTR não é possível tocar CSS quando o idioma muda. Use valores lógicos sempre que for possível para reduzir a manutenção.

Tabela de propriedades relacionadas

Essas propriedades são suelen ir de la mano quando você trabalha com alinhamento e direção do texto. Repasarlas juntas ajudam a construir sistemas tipográficos robustos:

Propriedade	Descrição
direção	Defina a direção de escritura (LTR/RTL).
text-align	Controla o alinhamento horizontal do conteúdo embutido.
alinhamento-texto-último	Aline especificamente a última linha de um parágrafo.
unicode-bidi	Gestiona cómo se anidan y resuelven direcciones de text mezcladas.
vertical-align	Ajusta o alinhamento vertical em linhas e células.

Combinar bem permite resolver desde interfaces multilíngues complexas até detalhes tipográficos muito precisos em cartões, tabelas ou componentes reutilizáveis. Planeje valores por defeito e exceções com cabeza.

Compatibilidade de gua

A propriedade text-align conta com suporte muito amplo desde versões iniciais em navegadores modernos, por aquilo que você pode usar com tranquilidade em projetos de produção. Os valores clássicos operam sem problemas praticamente em todas as partes.

• Google Chrome: 1.0
• Internet Explorer: 3.0
• Microsoft Edge: 12.0
• Raposa de fogo: 1.0
• Ópera: 3.5
• Safári: 1.0

Tem em conta que los matices de justificado pode haver uma variedade de motores (por exemplo, Firefox frente ao Chrome/Safari). Se a aparência precisa do justificado é crítica, valida o resultado visual no navegador objetivo.

Exemplos rápidos de valores tradicionais

Izquierda (por defeito em LTR): alinhamento natural para a maioria dos idiomas ocidentais. Útil para lectura cómoda y patrones de escaneo previsibles.

p.izquierda {
  text-align: left;
}

Direita: útil para metadados, firmas, datas e blocos secundários. Crie contraste com o conteúdo principal.

p.derecha {
  text-align: right;
}

Centralizado: ideal para títulos, CTA ou blocos breves onde se busca foco visual imediato. Evita-lo em parágrafos largos por legibilidade.

.cta-titulo {
  text-align: center;
}

Justificado: estética de coluna editorial com bordas retas. Combine-o com partições de palavras durante o processo.

.columna {
  text-align: justify;
}

Boas práticas e recomendações

No abuses del justificado en colunas muito estreitas, porque pode gerar espaços irregulares. La legibilidad es prioritaria. Ajuste medidas de linha e, se possível, habilite guiões automáticos.

Cuando maquetes en entornos multilíngue, priorizar começo y final para adaptá-lo sem tocar CSS para alterar o idioma. Te ahorra hojas duplicadas e reduz erros.

Si un inline no responde a text-align como esperas, observe a exibição do seu contêiner. Muitas vezes o problema é resolvido aplicando a propriedade no bloco pai ou alterando a exibição do elemento.

Componentes complexos com capas variadas, documenta onde se estabelece o alinhamento “base” e onde são permitidas exceções. Uma jerarquía clara evita sobrescrituras desnecessárias e estilos frágeis.

Limitações, raridades e futuro da especificação

A especificação contempla ideias como alinear a primeira linha diferente do resto com uma notação composta (inicio fim), A alinear por uma cadeia (por exemplo, text-align: "." start;) para colunas numéricas com separador decimal. Hoy por hoy no cuentan con soporte prático nos navegadores, mas apontei para casos de uso de reais em tabelas e listados.

Lembrar text-align não resolve o alinhamento vertical nem o centro do próprio blocoPara isso, usa vertical-align (em seu contexto), Flexbox ou Grid. Separar responsabilidades você ahorra frustrações e resultados inconsistentes.

Respeito à compatibilidade, os valores tradicionais têm suporte muito sólido. em justificado, os motores podem diferir no padrão de espaço; valida se sua marca exige homogeneidade absoluta. A experiência real do usuário manda.

Demonstrações rápidas com HTML e CSS

Uso direto em um título centralizado: um clássico que funciona para títulos de heróis e blocos destacados.

<h1 class="titulo">Alineación con text-align</h1>
<style>
  .titulo { text-align: center; }
</style>

Contenedor que centraliza o conteúdo inline e um parágrafo justificado: combinação frequente em artigos.

<div class="intro">
  <p>Este es un párrafo de introducción con márgenes pulidos.</p>
</div>
<style>
  .intro { text-align: center; }
  .intro p { text-align: justify; }
</style>

Aplicar alinhamento-texto-último para destacar o cierre del párrafo: controle até não tocar o conteúdo.

<p class="cierre">La última línea quedará centrada, resaltando el final.</p>
<style>
  .cierre {
    text-align: justify;
    text-align-last: center;
  }
</style>

Exemplo com valores lógicos inicio fim que se adaptan a LTR/RTL: ideal para produtos globais.

<div class="tarjeta">
  <h3 class="tarjeta__titulo">Título de tarjeta</h3>
  <p class="tarjeta__texto">Texto descriptivo del contenido.</p>
</div>
<style>
  .tarjeta__titulo { text-align: start; }
  .tarjeta__texto  { text-align: end; }
</style>

E se você precisar alinhamento vertical online (por exemplo, ícone e texto): vertical-align te saca del apuro.

<span class="icono">★</span> <span class="label">Favorito</span>
<style>
  .icono { vertical-align: middle; }
  .label { vertical-align: middle; }
</style>

Nos cenários da lista de artigos, você pode alinhar os metadados à direita e o título ao início com valores lógicos. La jerarquía visual queda clara e se adapta à direção do texto.

.post__title { text-align: start; }
.post__meta  { text-align: end; }

Se você usar um grade de tarjetas, centrais ao nível de conteúdo com text-align e deixe o sistema de layout (Grid/Flex) do departamento espacial. Separar responsabilidades e evitar conflitos.

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { text-align: center; padding: 1rem; border: 1px solid #e5e5e5; }

Por último, se quiseres que todo o corpo Aqui está uma alinhamento por defeito, você pode aplicá-la no nível raíz e ajustar exceções em componentes concretos. Tenha cuidado com o alcance para não centralizar o texto que deve ser alinhado ao início da acessibilidade.

body { text-align: left; }
.header, .hero { text-align: center; }

A chave com text-align Isso significa que você atua sobre o conteúdo embutido no conteúdo, escolhe o valor adequado para o idioma e o dispositivo e combina-o com propriedades como alinhamento-texto-último, direção y vertical-align quando a situação é necessária. Com essas diretrizes, você obterá resultados consistentes, legíveis e fáceis de manter.