Como alinhar à esquerda, à direita e centralizar com CSS

Escrito por ehow contributor | Traduzido por rodrigo avellar
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como alinhar à esquerda, à direita e centralizar com CSS
As folhas de estilo permitem alinhar e centralizar mais do que o texto (website layout image by 6922Designer from Fotolia.com)

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.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

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

Lista completaMinimizar

Instruções

    Como alinhar o texto

  1. 1

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

  2. 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. 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. 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. 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. 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. 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 & Advertências

  • 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.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível