Mais
×

Como alinhar à esquerda, à direita e centralizar com CSS

Atualizado em 21 fevereiro, 2017

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
Cite this Article A tool to create a citation to reference this article Cite this Article