Site centralizado com CSS
Postado por: Pedro Rogério emPara 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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Gostei da dica, bem mais fácil e sem hacks
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.
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.
margin:0 auto é mais simples, fácil, simplesmente funciona e não é hack. ;)
IE 5.5 não existe mais…
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.
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
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?)
Ah, quase esqueci, te recomendei em um Meme, sobre as fontes de conhecimento:
http://webbemfeita.com/webbemfeita/meme-compartilhando-conhecimento/
[]‘s
Prefiro a tecnica do margin: 0 auto; eh mais simples do que essa ai e nao da problema.
Este código me facilitou a vida
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′.
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
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.
IE < 6 é passado .. Ninguém mais usa isso não !!
[]´s
Fill, não precisa usa display:block em div. Div já é bloco.
Usa só o margin:0 auto; mesmo.
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
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!
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.
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.
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…
Léslie, inclui esta linha:
#geral { margin:0 auto }
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;
}
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
tipo menu monitor aqui de 17 LG com essa margin -370px fica mais a direita e nao centraliza e colocando:
position: relative;
left: 50%;
width: 740px;
margin: 0 0 0 -670px;
assim da certo alguem pode me explicar porque nao entendi ?
@Geovano,
Também utilizo um monitor LG de 17′, e funciona normalmente.
opa, galera, será que alguém pode me ajudar?
tenho um html (index) com 2 frames
home (superior)
menu (inferior)
no home.html tudo certo
mas no menu.html (que tem um flash de menu), quando eu atualizo o index.html no IE 6/7 o oque eu queria que ficasse centralizado, não fica… só no IE fica a esquerda… no mozzila fica no centro…
mas quando eu atualizo só o menu.html ele fica centralizado…
vou passar os códigos pra vcs verem…
html index.html
<!–
html menu.html
animação do menu
–>
css
/*
#menu{
width:750px;
height:50px;
margin:auto;
background-color:#000;
}
*/
como faço pra deixar centralizado tbm no IE ???
Galera !
Estou com um grande problema, criei um site que quando é aberto, por outros Navegadoores (sem ser o IE), abre perfeitamente centralizado tudo legalzinho.
Agora quando abre pelo IE 8, abre em formato menor e a direita da página, não centraliza, está hospedado em um servidor gratuito, que apresenta pequenas propagandas na parte superior do site, depois logo a baixo vem o site, mas quando é aberto pelo IE a página é deslocada para direita.
Já tentei tudo que postaram no forum e nada resolveu.
Preciso de alguem realmente bom, que queira aceitar este desafio, para me ajudar a solucionar esse problema, não tenho grandes conhecimentos em criação de sites, estou com a cara e a coragem.
Outra dúvida não consiguo criar uma área restrita aberta somente atrvavés de senha pré determinada.
.
OBrigado !
Mto Boa a dica, nem precisa de Hack, facilita mto:)
perfeito!