Como alinhar um texto em CSS - A propriedade text-align: left, right, center e justify - Tutorial

Neste tutorial de CSS de nosso curso, iremos aprender a usar uma propriedade bem simples, a text-align, mas extremamente útil e usada, que serve para alinharmos os textos de um site na posição esquerda (left), direita (right), centralizada (center) ou justificada (justify).


Alinhando um texto em CSS - text-align

Talvez você não tenha percebido antes, mas uma das regras mais importantes e usadas na criação e formatação de textos, é o alinhamento.

Usamos o alinhamento simplesmente à todo instante.

Em nosso mundo ocidental, a regra é alinhar pela esquerda.
Abra seu Facebook ou em uma notícia de um jornal, verá que o texto é religiosamente alinhado na esquerda, mas nem sempre isso é regra.

Neste tutorial vamos ver como o fantástico CSS nos permite alinhar um trecho da maneira que melhor nos convier, através da propriedade text-align, que como a tradução do inglês pode sugerir, serve para alinhar um texto.

Alinhar pela esquerda em CSS - text-align: left;

Na sociedade ocidental, sem dúvidas, o alinhamento do texto pela esquerda é o mais predominante.
Jornais, livros, revistas, textos de sites, bulas, anúncios gráficos e uma infinidade de textos são alinhados pela esquerda.

Um exemplo de alinhamento a esquerda, é o nosso Curso de HTML & CSS, note que todos os textos estão alinhados pela esquerda. Ou seja, eles começam no lado esquerdo e podem terminar em qualquer lugar, mas começar, é pela esquerda.

A sintaxe para fazer isso em CSS é:

text-align: left;

Onde o valor left, do atributo text-align, significa esquerda em inglês.
Bem óbvio e simples, não?

É sempre interessante você usar o text-align para alinhar seu texto pela esquerda, muito embora isso seja feito automaticamente pelos editores de textos e browser. A razão de fazer isso é garantir o alinhando pela esquerda/left, pois se você criar um site com imagens, banners, tabelas e outros elementos, estes podem ir empurrando seu texto e o deixando desalinhado.




Alinhar pela direita em CSS - text-align: right;

Já para alinhar um texto pela direita, devemos usar o atributo text-align com o valor right, que significa direita, em inglês.
A sintaxe é:

text-align: right;

Embora ela seja mais rara no dia-a-dia ocidental, existem diversas culturas que o texto começa pela direita, como a língua Árabe, assim este tipo de alinhamento de texto é bem mais comum na outra metade de nosso planeta.

Além disso, há vezes que você irá precisar alinhar pela direita, como em uma tabela, para organizar melhor seu conteúdo.

O seguinte código CSS & HTML alinha pela direita:
<p style="text-align: right;">Apostila de HTML e CSS</p>

O resultado é:
Apostila de HTML e CSS

Bem fácil, não?

Centralizar um texto em CSS - text-align: center;

Um outro tipo de alinhamento, universalmente usado, é o de centro.
Este tipo de alignment é bem comum em títulos ou textos para chamar atenção.

Geralmente você vai ver o nome de uma matéria, nome de um jornal ou slogan centralizado, ao meio da página. Isso é facilmente feito com o atributo text-align, usando o valor center, veja a sintaxe em CSS:

text-align: center;

Por exemplo, para fazer com que todas suas tags de cabeçalho fiquem sempre centralizadas (no meio da página, em qualquer dispositivo), use o seguinte código CSS na sua folha de estilos:

h1, h2, h3, h4, h5, h6 {
  text-align: center;
}

Como justificar textos em CSS - text-align: justify;

Veja os anúncios de um classificado em qualquer jornal impresso.
Note que há um alinhamento na esquerda e outro na direita.

Não importa o número de palavras, o texto sempre começa numa mesma coluna e termina em outra, todas as linhas de texto. Isso é justificar, alinhar em ambos lados.

Para que ocorra esse ajuste, os espaços em branco entre as palavras mudam, entre algumas palavras há um espaço, entre outras há dois ou mais, tudo para alinhar lateralmente, e em ambos lados, o texto. Isso é justificar um texto.

Podemos justificar facilmente um texto usando o atributo text-align com o valor justify, cuja a sintaxe é análoga aos exemplos passados, veja:

text-align: justify;

Por exemplo, vamos criar uma tabela de tamanho 200px e escrever um texto dentro dela.
Note que há espaçamentos diferentes entre as palavras, isso é feito automaticamente para existir o justify no texto, veja o código HTML & CSS:

<table width="200px" border="1">
  <tr><td>
	<p style="text-align: justify;">Não importa o tamanho deste texto, ele será alinhado tanto pela direita como esquerda, pois usamos o valor "justify" na propriedade "text-align"</p>
  </td></tr>
</table>

Veja o resultado deste código:

Não importa o tamanho deste texto, ele será alinhado tanto pela direita como esquerda, pois usamos o valor "justify" na propriedade "text-align"

2 comentários:

Jairo Costa disse...

Muito boa, resolveu o problema do site da ONG que faço parte, agradeço em nome da equipe a solução para o problema. Forte abraço.

Anônimo disse...

Amigo, serve para HTML também :) me desculpe de CSS e HTML for a mesma coisa. Eu não sou muito bom com isso, tenho pesquisado sobre recentemente