Alinhamento de texto - CSS-Tricks

Anonim

A text-alignpropriedade em CSS é usada para alinhar o conteúdo interno de um elemento de bloco.

p ( text-align: center; )

Estes são os valores tradicionais para alinhamento de texto:

  • left- O valor padrão. O conteúdo é alinhado ao longo do lado esquerdo.
  • right - O conteúdo é alinhado ao longo do lado direito.
  • center- Centros de conteúdo entre as bordas esquerda e direita. Os espaços em branco nos lados esquerdo e direito de cada linha devem ser iguais.
  • justify - O conteúdo é espaçado de forma que o maior número possível de blocos caiba em uma linha e a primeira palavra dessa linha fique na borda esquerda e a última palavra na borda direita.
  • inherit - O valor será qualquer que seja o elemento pai.

“Conteúdo” é usado aqui como um termo em vez de “texto”, porque embora o alinhamento de texto certamente afete o texto, ele afeta todos os elementos embutidos ou blocos embutidos naquele contêiner.

Também existem dois novos valores em CSS3, início e fim. Esses valores facilitam o suporte a vários idiomas. Por exemplo, o inglês é um idioma da esquerda para a direita (ltr) e o árabe é um idioma da direita para a esquerda (rtl). Usar “direita” e “esquerda” para valores é muito rígido e não se adapta conforme a direção muda. Esses novos valores se adaptam:

  • start - O mesmo que “left” em ltr, mesmo que “right” em rtl.
  • end - O mesmo que “right” em ltr, mesmo que “left” em rtl.

Há também match-parent, que é semelhante a inherit, apenas que o novo valor é calculado em relação à direção do elemento atual em vez de, você sabe, não fazer isso.

Existem algumas coisas na especificação que ainda não têm suporte para navegador. Um é o valor “início fim” que alinha a primeira linha como se fosse “início” e todas as linhas subsequentes como se fosse “fim”. Outra é dar ao valor uma string, como text-align: "." start;O texto será alinhado ao longo da primeira ocorrência disso, como para alinhar uma coluna de números ao longo de um ponto decimal.

Exemplos

Este texto é alinhado à esquerda.

Este texto está alinhado à direita.

Estou centrado!

Estou justificado. Eu preencho o espaço exatamente (exceto na última linha), mesmo que às vezes tenha que me esticar um pouco.

Eu herdei o alinhamento de meu pai. Nesse caso, isso significa esquerda.

Suporte para navegador

Para esquerda, direita, centro, justifique:

cromada Safári Raposa de fogo Ópera IE Android iOS
Nenhum Nenhum Nenhum 3,5+ 3+ Nenhum Nenhum

Para os valores starte end:

cromada Safári Raposa de fogo Ópera IE Android iOS
Nenhum 3.1+ 3,6+ Nenhum Nenhum Nenhum Nenhum