SITE CENTRALIZADO COM CSS
Postado em: 13 de agosto de 2007 por Pedro RogérioPara centralizar o site com CSS, geralmente utiliza-se de um text-align:center; no body de nossa página para que o site fique centralizado no IE, e para os outros Browsers, aplicamos margin:0 auto;, só que também temos que dar um text-align:left; aí para corrigir o hack que utilizamos para centralizar o site no IE, pois senão todo o conteúdo do site irá ficar centralizado na página. Recentemente descobri uma maneira bem mais fácil de centralizar o site na página com CSS em qualquer resolução, que consite no seguinte:
Na Div que contém todo o site, aplique o seguinte CSS:
#content
{
position: relative;
left: 50%;
width: 740px;
margin: 0 0 0 -370px;
}
E no HTML:
<div id="content">
<!-- Conteúdo do site -->
</div>
Mais simples impossível não? O que precisamos basicamente é definirmos que a div que contém o site irá se posicionar relativamente ao corpo da página, mas precisamente 50%, em width é onde você coloca a largura total dessa Div, alí foi usado 740px, e a mágica acontece quando definimos que todas as margens estão zeradas, menos a margem esquerda, que deverá ser a metade do tamanho da Div que contém o site, só que negativo. Dúvida que funciona? Então dê uma olhada.
Cristian Trentin disse: 13.08.07 ás 08:41
Gostei da dica, bem mais fácil e sem hacks
Rafael Dourado disse: 13.08.07 ás 08:54
O IE6 reconhece o margin:0 auto;
O que não reconhece é do 5.5 para trás. Não sei como está a estatística do site de vocês, mas nenhum site meu nem de meus clientes registram alguém usando o IE 5.5 mais.
Hebertphp disse: 13.08.07 ás 09:13
Bom dia..
Funcionou tanto no IE6 como no firefox.
Agora uma pergunta, porque no IE6 a distância do texto para a margem superior do div ficou diferente em relação ao Firefox??
No mais será de grande ajuda e vou aproveitar para colocar na minha página com os devidos créditos.
Jader Rubini disse: 13.08.07 ás 12:16
margin:0 auto é mais simples, fácil, simplesmente funciona e não é hack.
IE 5.5 não existe mais…
Rafael disse: 13.08.07 ás 12:42
Uow, muito boa essa técnica!
E aqui na agência nós já registramos pessoas que ainda são usuárias de I.E 5.5 ainda, infelizmente.
Fill disse: 13.08.07 ás 12:49
Xi… nao sei se isso ai é útil não.. Sinceramente o display: block; margin: o auto; resolve todos os meus problemas =) E como Rafael Dourado disse faz tempo que nao registramos mais acessos com o 5.5
Rochester Oliveira disse: 13.08.07 ás 13:09
Se a janela do cara não estiver maximizada e com menos de 740px ele corta um pedaço do site, por isso prefiro a técnica com margin. Mais simples, limpo e não dá dor de cabeça com móveis por exemplo (o IE de pda interpreta o css screem então o seu site ia SUMIR nele, sentiu o drama?)
Rochester Oliveira disse: 13.08.07 ás 13:10
Ah, quase esqueci, te recomendei em um Meme, sobre as fontes de conhecimento:
http://webbemfeita.com/webbemfeita/meme-compartilhando-conhecimento/
[]’s
Guido disse: 13.08.07 ás 13:53
Prefiro a tecnica do margin: 0 auto; eh mais simples do que essa ai e nao da problema.
Marcio Gazetta disse: 13.08.07 ás 14:11
Este código me facilitou a vida
Leonardo Klück disse: 13.08.07 ás 14:13
Utilizo essa técnica quando quero centralizar verticalmente algum bloco. Para tanto deve-se usar ‘position:absolute’, ‘top:50%’, ‘height: X’, ‘margin-top:- X / 2′.
Mayck Xavier disse: 13.08.07 ás 15:06
Rapaz… Eu uso do seguinte modo…
No css:
#tudo {
width: 760px;
margin:0 auto; padding: 10px;
text-align:left;
}
No site:
todo o site
O “text-align” é pro conteudo não ficar centralizado. Não sei se isso é considerado hack. =)
fcD
Mayck Xavier disse: 13.08.07 ás 15:07
Ehr… Não saiu o código da div no comentário acima =)
seria assim:
div id=”tudo”>
todo o site
/div>
Obs: Não coloquei o sinal ” <” para o código aparecer.
Túlio Vargas disse: 14.08.07 ás 02:39
IE < 6 é passado .. Ninguém mais usa isso não !!
[]´s
Rafael Dourado disse: 14.08.07 ás 08:25
Fill, não precisa usa display:block em div. Div já é bloco.
Usa só o margin:0 auto; mesmo.
Função Design disse: 14.08.07 ás 08:26
Acho a solução do Jader Rubini mais prática e correta. Mas valeu pela dica, sempre visitando seu blog, conteúdo de qualidade. Abraços
Leonardo L Procópio disse: 15.08.07 ás 19:25
Mano, essa dica é boa!
Mas é ruim quando a janela é menor do que a div, pois o valor negativo começa a recortar o conteúdo.
Nesse caso é preferível usar a outra forma mesmo!
grande abraço!
Samuel Alves disse: 22.08.07 ás 08:10
Eu faço assim:
html {heigth:100%}
Body{
margin:0;
padding:0;
text-align:center;
}
#conteudo {
margin-left:auto;
margin-right:auto;
position:relative;
}
Assim eu testei e deu certo nos seguintes navegadores: OPERA 9, IE, Mozilla Firefox.
Abraço Galera.
siteblogger disse: 28.08.07 ás 11:31
olha isso é relativo depende do browser!!! por não haver um padrão de interpretação dos browser cada um descobre uma maneira.
a minha é
* { margin: 0; padding: 0; }
# pagina {
width: 760px;
margin: 0 auto;
}
isso torna independente a parte de cima chamada de banner e a parte de baixo chamada rodape. só o meio é centralizado.
Léslie Bagalho disse: 22.09.08 ás 22:46
Olá pessoal,
No meu CSS uso conforme abaixo e depois chamo as div no html…
Mas só consigo centralizar no IE e no Mozilla não vai de jeito algum.
Alguém poderia me ajudar respondendo se puder para leslie.bagalho@yahoo.com.br..
Vlw
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
margin: 0px;
padding: 0px;
}
#geral{
background-color: #FFFFFF;
width: 760px;
height: auto;
margin-top: 5px;
border: 1px solid #ccc;
border-bottom-width: 1px;
}
OBS: No IE a borda aparece e no Mozilla não..
Sou iniciante no assunto…
Rafael Dourado disse: 22.09.08 ás 22:55
Léslie, inclui esta linha:
#geral { margin:0 auto }
Léslie Bagalho disse: 22.09.08 ás 23:11
Rafael, obrigado..
E quanto a borda que aparece no IE e no Mozilla não?
#geral{
background-color: #FFFFFF;
width: 760px;
height: auto;
border: 1px solid #ccc;
border-bottom-width: 1px;
margin: 5px auto;
}
Rafael Dourado disse: 22.09.08 ás 23:21
Tira esse border-bottom-width: 1px; que é desnecessário.
Se não está aparecendo no FF, ou tem erro no código html ou tem alguma outra coisa de css em algum outro canto que tu não disse. rsrs