Centralizar página na tela com CSS
Publicado por admin | Colocado em CSS | Publicado em 24 Fev 2009
Tags:Centralizar, CSS, div, página, simples, todos os browsers
2
Nesta dica vou mostrar como centrar uma página na tela, independente da resolução ou tamanho do monitor usado pelo visitante.
O “truque” consiste em englobar todo o documento dentro de uma div e estilizá-la com umas regras CSS bem simples.
Em geral, uma página centralizada na tela é dimensionada para uma largura que se acomode numa tela com resolução de 800 x 600 px. Vamos então admitir esta hipótese de largura 800px para nossa página.
A largura total da div que engloba a página toda a qual chamaremos #tudo será adotada igual a 760px ( este valor é bastante cômodo, para garantir que em nenhum browser apareça uma barra de rolagem horizontal em 800 x 600 de resolução. Se você costuma projetar com valores diferentes use-o, mas certifique-se da eliminação da rolagem horizontal em 800 x 600).
Então estamos acertados em uma largura de 760 px. Se você simplesmente definir esta largura para a div ela será colocada no canto esquerdo da tela!
A propriedade CSS margin faz o “truque”. Basta definirmos que as margens esquerda e direita serão automáticas, pois CSS prevê o valor auto para as margens.
É assim: CSS dimensiona a div com a largura especificada e coloca margens esquerda e direita IGUAIS. Se a tela tem largura de 1024px, CSScalcula 1024px – 760px = 264px e coloca margens laterais de 264px / 2 = 132px CENTRANDO A PÁGINA qualquer que seja a resolução.
MAS QUE DROGA! O Internet Explorer interpreta errado a regra como ela foi mostrada acima. Ela funciona e centraliza a página em todos os browsers, menos no IE 
Devemos então usar um artifício (hack) para fazer funcionar no IE. Basta declarar text-align:center; no elemento body da página e isto resolve, mas cria outro problema. Além de centralizar no IE coloca os textos também centralizados na página. E, para corrigir isto declaramos na #tudo, text-align:left; UFA! obrigado ao IE pelos seus “bugs” para as CSS
E, a seguir o código completo para você copiar e colar no seu editor e fazer mudanças para entender como colocar uma página centrada na tela.
<!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"> <head> <style type="text/css"> body { margin:0; padding:0; background:#cccccc; text-align:center; /* hack para o IE */ } #tudo { width: 760px; margin:0 auto; padding: 10px; text-align:left; /* "remédio" para o hack do IE */ } #conteudo { padding: 5px; background-color: #eeeeee; } </style> </head> <body> <div id="tudo"> <div id="conteudo"> <h1>Pagina Centrada com CSS sem scroll ate 800x600</h1> <p> Não use nenhum elemento HTML (figuras, tabelas, etc...) com largura superior a 750px.</p> </div> </div> </body> </html>
Está muito Bom.. mas experimentes chamar um css externo.. passo a explicar…
guardam um ficheiro com o nome style.css onde no interior colocam..
/*============*/
/*=== Body ===*/
/*============*/
#body {
margin:0;
padding:0;
background:#FFFFFF;
text-align:center; /* hack para o IE */
}
#tudo {
width: 760px;
margin:0 auto;
padding: 10px;
text-align:left; /* “remédio” para o hack do IE */
}
#conteudo {
padding: 5px;
background-color: #B8860B;
text-align:center;
}
——————————
seguidamente criam uma pagina ghamada teste.html..
e colocam o codigo..
Centrar uma página com CSS
/*chama o css*/
hello world!
hello world!
——————–
é preferivel assim, fica tudo mais organizado!
como fazer isso no blogspot?