Arquivo da tag: CSS

Como centralizar uma página web

A imagem abaixo mostra as dicas para centralizar um documento na web.

centralizar_novo

 

O código respectivo do html e css estão abaixo.

A parte do HTML

<!DOCTYPE html>
<html>
   <head>
   <!-- insira aqui os elementos do head -->
   </head>
   <body>
      <section id="principal">
       <!-- insira aqui os conteúdos da páginas a serem centralizados -->
      </section>
   </body>
</html>

A parte do CSS

@charset "UTF-8"
/* CSS Document /*
#principal {
      width: 960px;
      margin: 0 auto;
    }

Clique também para baixar os arquivos de exemplo.

Posicionamento

O posicionamento de elementos CSS pode ser bastante variado de acordo com o objetivo. Os quatro tipos de posicionamento mais comuns são: static, relative, absolute e fixed. position

  • static – posição padrão, não permite deslocamentos de topo, esquerda, direita ou base.
  • relative – o posicionamento se dá a partir de deslocamento (topo, esquerda, direita ou base) da posição original, podendo ser positivo ou negativo.
  • absolute – o posicionamento se dá a partir de coordenadas absolutas e torna-se independente dos demais elementos da página.
  • fixed – permite fixar o elemento na coordenada, mesmo que a página se desloque, o elemento permanece na posição.

Para ver os exemplos funcionando, acesse os arquivos no link.