CSS Tutorial – Como centralizar uma DIV

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.

2 comentários sobre “CSS Tutorial – Como centralizar uma DIV

Deixe um comentário