Muitos Web Designers iniciantes não sabem como centralizar uma DIV em relação ao browser.
Neste tutorial irei demonstrar como fazer isso com DIV, CSS e HTML. É muito simples podendo ser feito com apenas um editor de texto simples (notepad – Windows, vim – Linux, TextMate – MacOS)
Começando
Primeiramente vamos criar nossa página HTML. Por padrão, a primeira página de seu site deve ser chamada de index.
Então vamos lá, crie um arquivo chamado index.html e edite ele no seu editor de texto favorito. Vamos iniciá-lo com as tags HTML padrão
<html> <head> <title>PogNotFound.wordpress.com !</title> </head> <body> </body> </html>
Entre as tags <body>…</body> vamos inserir nossa divisória (DIV) que irá guardar todo o conteúdo do site.
<body> <div id="conteudo"> Esta é a DIV que será alinhada automaticamente, não importando a resolução de tela! </div> </body>
Agora vamos criar um arquivo de estilos CSS chamado de estilos.css. Atenção, este arquivo deve ficar na mesma pasta que sua página index.
O HTML deve importar o arquivo de estilos CSS para poder funcionar. Vamos adicioná-la dentro das tags <head>…</head>
<head> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>
Para o browser alinhar a DIV exatamente no centro da página, devemos informar uma width e marcar suas margin-left e margin-right como auto.
Vamos ao código…
#conteudo { width: 740px; margin-left: auto; margin-right: auto; border: 1px solid #000000; }
Adicionamos também um atributo de borda para você ver exatamente onde a DIV ficou.
PRONTO! Agora dentro dessa DIV é só colocar todas as informações do site. Se quiser pode diminuir ou aumentar a DIV apenas alterando o tamanho de sua width
Browsers Tests
O código acima foi testado em IE6, IE7, Firefox, Opera e Safari.
OLA DESENVOLVEDOR OU DESENVOLVEDORA ^^ MUITO OBRIGADO LOL
FUNCIONOU CERTINHO
Adorei ter ajudado!