Contente

• Instruções
• Como alinhar o texto
• left {
• right {
• center {
• Como centralizar divisões, divisões de contorno e corpo
• Dicas
• O que você precisa

Em vez de usar os atributos de alinhamento em HTML contidos nas tags HTML que marcam o texto, é melhor que os web designers transfiram as informações de apresentação (opções de alinhamento) para a folha de estilos. Este artigo explicará como alinhar o texto e como centralizar elementos de página maiores, como divisões.

Instruções

As folhas de estilo permitem alinhar e centralizar mais do que o texto (website layout image by 6922Designer from Fotolia.com)

Como alinhar o texto

1. Para alinhar texto dentro de um bloco de texto normal, como um parágrafo ou citação, use a propriedade text-align.

2. As opções de valor para a propriedade text-align são left (esquerda), right (direita), center (centro) e justify (justificar). Como o texto justificado não é muito legível na Web, a ilustração mostra somente os alinhamentos à esquerda, à direita e centralizado. Nessa ilustração, cada parágrafo tem uma borda preta para demonstrar o tamanho do elemento de bloco na página se não for aplicado um ajuste de largura ao elemento.

   
   

3. Normalmente, um elemento é atribuído a um id ou classe. O alinhamento de texto em quaisquer itens nesse id ou classe é definido com uma regra, como as seguintes:

   left {

   text-align: left; }

   right {

   text-align: right; }

   center {

   text-align: center; }

Como centralizar divisões, divisões de contorno e corpo

1. Talvez você queira centralizar todo um layout ou uma grande divisão de um layout. Nesses casos, usa-se uma técnica diferente de CSS.

2. Você aplica a regra CSS ao seletor do elemento maior que deseja centralizar. Ele pode ser o elemento de corpo, uma divisão de contorno ou uma divisão recipiente.

3. A centralização por esse método não afeta o alinhamento do texto. O elemento centralizado conservará o alinhamento à esquerda padrão do texto dentro do elemento centralizado.

   
   

4. A seguir, uma ilustração de todo um elemento de corpo (com uma borda preta para fins de esclarecimento) centralizado em uma página. Deve ser definida uma largura para o elemento, em seguida as margens esquerda e direita são definidas como automáticas. Isso é feito do seguinte modo:

   body { width: 80%; margin-right: auto; margin-left: auto; border: 1px solid black; }

Dicas

• Normalmente não é necessário usar align-left, já que o alinhamento à esquerda é o padrão. Contudo, você tem de estar ciente de que ele existe, caso tenha de redefinir um texto anteriormente centralizado ou alinhado à direita para o padrão posteriormente. A largura do elemento a ser centralizado pode ser definida em pixels, porcentagens ou ems.

O que você precisa

• Editor de texto
• Editor HTML
• Conhecimentos básicos sobre HTML