Centralizando uma página com CSS

Want create site? Find Free WordPress Themes and plugins.

Uma dúvida muito comum de alunos e iniciantes: como centralizar o conteúdo numa janela de navegador? Realmente é um recurso bastante útil, já que aproveita o espaço de maneira uniforme e se adapta a qualquer tamanho de janela.
Veja, abaixo, um código que centraliza o conteúdo. Observe que as divs posteriores são criadas aninhadas, ou seja, dentro da div “conteúdo”:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Centralizando com CSS</title>

<style type=”text/css”>

html, body, #conteudo{height:100%;}

body{text-align:center;}
#conteudo{
width:796px;
border: 2px #666666;
position:relative;
background-color:#CCCCCC;
margin:auto;}

.esquerda{
position:absolute;
top:10px;
left:10px;
width:245px;
background-color:#00FF00;}

.centro{position:absolute;
top:10px;
left:265px;
width:245px;
background-color:#ffff00;}

.direita{
position:absolute;
top:10px;
left:520px;
width:265px;
background-color:#ccff33;}

.dentro{
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
width:245px;
color:#FFFFFF;
background-color:#000000;}
</style>
</head>
<body>

<div id=”conteudo”>
<div class=”esquerda”>
Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />

<div class=”dentro”>
div dentro do div “esquerda!<br />
</div>
</div>
<div class=”centro”>
Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />
</div>
<div class=”direita”>Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />
Oi, teste de posicionamento
</div>
</div>
</body>
</html>

Experimente este código em sua página e faça suas modificações. Teste, ele funciona nos dois browsers (ie e firefox) principais. ok?

Entendendo o código
Para se atingir este objetivo, a utilização de elementos div foi essencial. Observe o seguinte trecho do código:

html, body, #conteudo{height:100%;}

Aqui, os elementos html, body (o corpo da página, parte visível ao usuário) e a div id “#conteúdo”, tiveram suas respectivas alturas definidas como 100%, ou seja, independente do tamanho da janela do browser(navegador), elas ocuparam toda a altura disponível.

Já neste trecho:

body{text-align:center;}

O body é utilizado como seletor de css para centralizar o conteúdo geral. Na verdade, com esta atribuição, o elemento principal da página (#conteudo), estará sempre centralizado.

#conteudo{
width:796px;
border: 2px #666666;
position:relative;
background-color:#CCCCCC;
margin:auto;}

A div id “#conteudo” será utilizada como div principal, todas as outras divs estarão dentro (aninhadas) a ela. Assim, é possível controlar a centralização dos elementos. A largura, definida como “width:796px”, tem o tamanho ideal para resolução de 800×600. Foi definida uma borda (border: 2px #666666), por razões estéticas, o mesmo acontecendo com a cor de fundo (background-color:#CCCCCC). O posicionamento foi definido como relativo (position:relative;) à página (elemento html e body). A margem está definida como automática (margin:auto).

Note que as div criadas posteriormente (esquerda, centro, direita) são inseridas dentro da div “#conteudo”, ou seja, suas tags são abertas e fechadas dentro da div principal, fazendo com que elas fiquem “dentro” da mesma. Todas estão com o atributo “position:absolute;”, para que o posicionamento seja absoluto com relação ao elemento pai (“#conteudo”), não à página.

Finalizando, foi inserida a div “dentro”, inserida dentro da div “esquerda”, demonstrando que é possível inserir divs dentro de divs indefinidamente. Porém, com critério e organização.

Did you find apk for android? You can find new Free Android Games and apps.
Distribua
  • hum… legal o artigo, só não concordo muito dele estar aqui nesse site.
    Achei que este fosse um espaço para discutirmos idéias, conceitos, ideologias, teorias etc.

    Sei que nem todos vao concordar e sei que nem todos possuem conhecimento sobre determinadas coisas e gostariam de saber esses truques, mas eu penso que a discussão de alguma teoria ou conceito é sempre mais proveitosa do que ficar aprendendo uma técnica.

    E se precisarmos de técnica, já existem muitos sites especializados nisso… mas sobre teoria e conceitos eu já não conheço muitos…

    abs

  • Eu concordo e não concordo com o Raphael, muito do pessoal que acessa aqui é webdesigner e vale essas dicas.

  • rss… sabia que vcs seriam a favor dos tutoriais! rs
    eu realmente ñ sei pq insisto nisso…

    bom, blz!
    então eu gostaria de pedir um tutorial sobre materiais reflexivos para o max, depois um tutorial bacana e bem explicativo sobre efeitos com máscaras no after effects, depois um sobre action script no flash…

    eu sei q tem isso em outros sites, mas já q aqui tb pode ter, eu prefiro ler aqui.

    abs a todos! rs

    PS.: ah, isso tudo sem deixar de lado os artigos de “textos longos e cansativos sobre teoria, conceitos e etc”, por favor!

  • Se é para colocar uma medida no body porque não usar esse codigo no css
    body {
    width:( Largura aqui );
    margin:0px auto;
    }
    Nesse codigo simples eu determinei a largura da página e centralizei ela em todos os navegadores assim o body fica colado no topo e com uma distancia igual da esquerda e da direita, não é incrivel.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *