Alexandre Mattos Blog » alinhamento http://www.alexandremattos.com.br/blog Design Web Fri, 09 Apr 2010 14:12:34 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Como centralizar o site com CSS? http://www.alexandremattos.com.br/blog/2009/12/como-centralizar-o-site-com-css/ http://www.alexandremattos.com.br/blog/2009/12/como-centralizar-o-site-com-css/#comments Fri, 04 Dec 2009 20:22:47 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=5 Você deve estar se perguntando como centralizar uma página com CSS. Por muito tempo as pessoas costumavam pegar códigos prontos para tirar essas dúvidas de alinhamento e acabam reaproveitando o código sem realmente saber o motivo e as propriedades que fazem o alinhamento.

O código abaixo, mostra como é simples você centralizar o conteúdo de uma página através do CSS.

arquivo.css

#alinhamento {
margin: auto;
width: 500px;
}

O próximo passo é inserir entre as tags body e /body a div com a id “alinhamento”. Veja como ficará.

<body>
<div id="alinhamento">
<!-- aqui fica todo conteúdo do site -->
</div>
</body>

Coloquei a margem como 500 pixels para ser visualizado em qualquer resolução de tela. Como você pode ver, é muito simples, com apenas 3 linhas de código css e 1 div, você alinha o site todo. Abaixo segue outro exemplo.

Página alinhada

Página alinhada

O código da imagem acima:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Alexandre Mattos Blog - Alinhamento</title>
<style>
#alinhamento {
margin: auto;
width: 500px;
background: #0099ff;
color: #ffffff;
}
</style>
</head>
<body>
<div id="alinhamento">
	<h1>Meu primeiro post</h1>
</div>
</body>
</html>

Está pronto, agora a criatividade para terminar o site é com você!

]]> http://www.alexandremattos.com.br/blog/2009/12/como-centralizar-o-site-com-css/feed/ 1