Conheça também: Onmasters . Ofertas . Divulgue! . Vai.la . Geraboleto . Baixa.la . Assista.la . Joga.la
» Início » Desenvolvimento » CSS e Tableless » Centralizar a página na tela! -->
 
Avaliação: | Publicado em: 15/09/2006
Centralizar a página na tela!
Leonardo L Procopio (mas pode me chamar de Léo!). Sou tecnico de Informatica, faço curso de Analise e Desenvolvimento de Sistemas e trabalho com desenvolvimento em Delphi. Mas tenho uma grande paixão por web, e por isso sou um grande estudante de suas tecnologias. Meu objetivo e transmitir o que sei de forma simples e descontraida!


"Tamo aqui de novo!!!"
Bom, depois de ter varias pessoas no meu msn perguntando como centralizar a pagina, eu resolvi escrever esse artigo aqui, demonstrando como é fácil!
Claro que vamos utilizar css pra fazer isso, e vamos começar entendendo tudo!

Temos que colocar uma div que ira englobar todo o conteúdo (sendo o nosso segundo body!). Ele deve conter o tamanho da pagina, que no nosso caso é 770px (pois assim em nenhum navegador ele apresenta a barra de rolagem horizontal).
Mas até ai tranquilo (ninguém batendo cabeça!), então vou explicar quem faz o trabalho pesado é o comando margin da css! Quando atribuímos margin: auto; ao nosso div, o navegador pega a resolução do usuário e encaixa a pagina no meio. Pensa o seguinte: temos uma resolução de 1024px, e nosso site tem 770px, o navegador faz o seguinte calculo (1024 - 770 = 254 / 2 = 127). Ele pega esse ultimo valor e coloca de margem esquerda e direita! Muito simples né?! Isso é margin auto!!!

Bom, mas eu não queria ser o estraga festa não, mas temos um pequeno problema com o margin auto no ie! É que esse tarado não consegue interpretar de forma correta (ou não interpreta!) o valor auto, então temos que fazer uns remendos básicos pra que tudo fique no ie também!
Uma solução é colocar text-align: center no body, assim o ie vai centralizar tudo! (tudo mesmo!!), mas fazendo isso, ele vai causar um erro que não é de agrado, pois tudo esta centralizado. Antes que a casa caia, vamos colocar no div que engloba tudo um text-align: left e pronto! O texto voltou ao lugar certo! Então!!!
Agora temos nosso sites centralizados!!!
Tudo poderia ser bem mais fácil se o ie desse essa moral né, mas...

Então da uma olhada no código ai!!!



-------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Pagina no Centro (css é o tudo!)</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<head>
<style type="text/css">
body {
      margin:0;  
      padding:0;
      text-align:center;     /*  esse eh o hack para o ie */   
}
#geral {
     width: 770px;
     margin: 0 auto;   /* ao magico aqui */ 
     text-align: left;    /* arrumando a zona q o hack anterior  */ 
 }
#conteudo {
    padding: 5px;
    background-color: #0086c6;
   
}
</style>
</head>
<body>
<div id="geral">
<div id="conteudo">
    <h1>Nossa pagina Centralizada!!!</h1>
    <p> Essa é nossa pagina na maior tranquilidade, mas lembre-se que nosso limite é 770px, não vai colocar nada maior aqui não em!!!!</p>
</div>
</div>
</body>
</html>

-------------------------------
Então a parada é essa ai!!
Grande abraço e até a proxima!!!

msn: leonardomerce@hotmail.com
Rio de Luz

-------------------------------

Vitor
Agora ja to indo no lugar certo!!!
Folgado em mano!!!
Valeu pelo artigo!!
Vou indicar pros amigos!!!
Maurivan Luiz Padilha <maurivan@maurivan.com>
Legal seu artigo, porém existe um modo mais simples para poder centralizar uma div, no caso bastaria a div geral estar assim: #geral{width:770px; margin:auto;} isto já seria o suficiente para centralizar, mas ficou legal seu artigo, parabéns rapaz.
Leonardo Procópio
Correto! Mas temos que lembrar que o ie tem uma mania feia de não seguir determinados comandos, e por isso que eu coloquei os text-align!
Firefox, opera, e outros, só o margin: auto; resolve, mas como o ie ainda é o mais usado, temos q fazer funcionar nele tbm!!!
Obrigado Pelo comentario!!!
Alfred R. Baudisch <alfred.baudisch@gmail.com>
Até eu iniciar a produção em tableless, minha maior dor de cabeça foi descobrir realmente esse "segredo" de centralização. Até que certa vez entrei no site de uma empresa "Em construção", uma imagem centralizada, e o único código era essa "varinha mágica". Nada melhor que revelar isso num artigo. ;) Abraços.
Leonardo Procópio
Tamo ai p/isso!!
Se tu tiver alguma sujestão, ou duvida sobre algo, fala ai que podemos fazer um artigo sobre o assunto!
abração!
Osny Santos Netto <netto@osnysantos.com.br>
Velho, colocando:
margin:0 auto;
já funciona no IE, FF, e etc...
Não é preciso usar esse hack, até porque o w3c não aprova, mais gostei bastante.
falou
Leonardo Procópio
Claro brother, mas no ie, ainda temos problemas com margin: 0 auto!
Esse hack é p/apresentar corretamente, pois nos browser do ie q testei, ele não centralizava!
Mas isso ja vai ser solucionado no ie 7!!!
Valeu pelo comentario!!!!
Meu Brother... Não sou gay não, mas se vc tivesse perto qdo enontrei essa matéria eu lhe dava um beijo!!! hshshs (nem tanto)

Cara, me quebrei um monte para conseguir centralizar a porra da página no firefox e era algo tão simples!!!

Mas agora estou com outro problema, monto a merda e ela aparece de um jeito no IE e de Outro no Fire...

É uma desgraça essas interpretações diferentes dos navegadores...

Valeu mesmo cara, continue com essas dicas ;-)
Leonardo Procópio
Valeu Jackson!!!
A parada é esse mesmo, o ie as vezes da uma atrapalhada no esquema, mas p/tudo tem um jeito!!!
Foi bom ter ajudado, (embora minha dona queira te dar umas porradas por vc ter falado em beijo!!rsrs) mas tamo ai p/ajudar mano!
Qualquer coisa tem o msn ai, é só dizer!
Grande abraço!
Rogerio Joaquim <ablazeteen@hotmail.com>
Nussa artigo muito bom me ajudou muuito...

Parabens....

Continue dandu mais dicas pra genti.. hehehehe

um abraçu....
Fala awe Léo,

Olha so kra o que vc postou awi foi mt bom, so que o meu problema tem um algo a mais por ex:

Vou citar as mesmas dimenções que vc ta legal...

width: 300px
height: 200px

mas esse seria o tamnho da minha ===home pager===

e tenho la ===contatos===

porem com dimenções diferentes

width: 400px
height: 300px

então logo que eu fazer todo o processo em que vc postou so vai centralizar a minha ===home pager===

então gostaria que vc caso concorde comigo, falasse um pouco sobre isso, eu estou atraz dessa solução atraves do script... mas não estou conseguindo achar si vc puder me ajudar eu agradeço desde ja ...

abraços
Mto boa!
nem imaginas como ajudaste!!!

:-D
Leonardo L Procópio <leonardolp@gmail.com>
Bruno, não entendi muito qual o problema, ele vai centralizar o seu conteudo enquanto ele form menor q a resolução mano. Tu pode usar essa ai que tu especificou sem problemas.
Seria isso mesmo?
Grande abraço!
ajadir bachi <acro3d@bol.com.br>
ola pessoal,
estou nescessitando uma ajuda, estou com problemas para posicionar fotos usando o css.
se alguem puder me ajudar me passando o codigo csse html para posicionar tres fotos na lateral left tres na lateral right .

ate sei posicionar mas elas se mexem desestroturando totalmente o site.
agradeço a ajuda
ajadir
Claudio Sergio <calbom@hotmail.com>
Sou amador em criação de sites, nao consigo centralizar a página de meu site para todos os tamanhos de vídeo. ex: em 800 fica ótimo mas em 1024 fica todo à esquerda. Utilo o publisher2003.

atte

Cláudio
olá Léo, gostei do artigo só tenho um probleminha... minhas draw layers ficam todas fora de lugar quando visualiso meu site em uma resolução diferente tipo:1024
vc tem alguma sugestão? sou meio leigo e uso o dreamwever para confeccionar meu site.
Grato pela atenção,
Edgard
Leonardo L Procópio <leonardolp@gmail.com>
Edgard, o grande problema de trabalhar no modo visual com esses programas é que eles colocam muito codigo que vc não precisa.
Tenta fazer esse exemplo que esta no artigo, e adaptar dentro dele o seu projeto! Grande abraço!
Qualquer coisa é so dizer!
Ahhh já estava arrancando meus cabelos aqui por conta do IE....sempre usei o margin: 0px auto; p/ centralizar, mas hj ele resolveu n funcionar no IE! Seu post foi um santo remédio!! Valeuuuu :)
Leonardo L Procópio <leonardolp@gmail.com>
Opa! Curamos unha encravada, jogamos cartas, lavamos carro, e trazemos seu companheiro de volta em 24 hora!! :)
Estamos ai para ajudar!
Grande abraço!
Olá, vlw mesmo, ja que trabalhocom muitas divs, coloquei uma dentro da div conteudo, com uma imagem nela e deui certo, ai coloquei uma outra div com uma animação e não funcionou. dá uma olhada:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Centrar uma página com CSS</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<head>
<style type="text/css">
body {
margin:0;
padding:0;
text-align:center;
background-color: #000000;
}
#tudo {
width: 760px;
margin:0 auto;
padding: 10px;
text-align:left; / "remédio" para o hack do IE /
}
#conteudo {
padding: 5px;
}
</style>
</head>
<body>

<div id="tudo">
<div id="conteudo">
<div id="menu" style="position:absolute; left:4%; top:35%; width:50%; height:50%; z-index:1"> / essa não funcinou, coloquei uma animação no fundo dessa! /
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="172" height="210">
<param name="movie" value="../Anima%E7%E3o/menu.swf">
<param name="quality" value="high">
<embed src="../Anima%E7%E3o/menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="172" height="210"></embed></object>
</div>
<div id="fundo"> <img src="../Layout/layout.JPG" width="740" height="580"> </div> / essa funcinou coloquei a imagem do fundo dessa! /
</div>
</div>
</body>
</html>

vlw obrigado
Leonardo L Procópio <leonardolp@gmail.com>
Douglas, esse codigo não tem as divs naõ.
Outra coisa, toma cuidado com a forma que vc ta colocando o comentario, ele deve ser assim / comentario /

Grande abraço!
Obrigado, mas é que eu peguei o codigo e continuei fazendo o meu site, essas divs são para conter no meu site e outras que ainda tenho que colocar.

A pergunta é:
Tem como deixar a página centralizada com as divs?

estou tentando de todas as formas até com porcentagem no stilo, mas não adianta, eu quero que seja que nem no site da oi, quando redimenciona, tudo se move junto! as animações, os textos, tudo! dá uma olhada só!

obrigado vlw
Leonardo L Procópio <leonardolp@gmail.com>
Douglas, me passa o link do site pra mim dar uma olhada!
Grande abraço!
Oi leonardo, obrigado pela dedicação, falei com minha professora de PWEB e ela resolver só tava faltando um comando:

#tudo
{
width: 760px;
margin:0 auto;
padding: 10px;
text-align:left;
background-color: #000000;
position: relative; <----esse
}

Era bom vc atualizar o tutorial e comocar essa linha, com ela, todas as divs que vc colocar dentro da div conteudo vaum funcionar direitinho!!

se quiser faça o teste, nem precisa colocar position diferente ou porcentagem nas divs que vc criar dentro da div conteudo!

Abraços, qualquer dúvida pergunte!
Leonardo L Procópio <leonardolp@gmail.com>
Douglas, seguinte brother, no artigo ja tem o
geral {
width: 770px;
margin: 0 auto;
text-align: left;
}
que faz isso!
Essa é a alma do artigo!
Grande abraço!
Daniel Dantas <grupodaru@gmail.com>
Muito bom, esste artigo é sempre a duvida de até grandes programadores em html e css, e você revelou o segredo, valeu.
Leonardo L Procópio <leonardolp@gmail.com>
Obrigado Daniel!!
Grande abraço! : Não avaliado
Excelente o seu artigo!!! Resolvi o problema do meu site pessoal e da empresa em que trabalho. Mas estou com outro problema: Não consegui centralizar as páginas geradas pelos Flash. Estou falando de página que usa AC_RunActiveContent que resolve o problema das bordas dos arquivos swf. Vc sabe como resolver isto?
Leonardo L Procópio <leonardolp@gmail.com>
Teriamos que dar uma olhada pra ver qual é!
Grande abraço! : Não avaliado
noh esse artigo salvou a minha vida!!!
thanks a lot!!
andre vellas <avdes@oi.com.br>
kra valew pelo topico do "centralizar"
prq eu to começando sozinho e faltava isso pro meu site. Vlw d.
vc me ajudou muito.
andre vellas <avdes@oi.com.br>
me diz uma coisa esse te menu foi feito no fireworks? Abraço.