Como centralizar o site com CSS?
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
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ê!
1 Comentário to Como centralizar o site com CSS?
Deixar um comentário
Pesquisar no Blog
Tópicos recentes
Calendário de Posts
Arquivos
- fevereiro 2010 (1)
- dezembro 2009 (14)
Olá! Estou aqui no seu site estudando seus tutoriais! =D