Concorra ao sorteio do livro Decisões com B.I. escrito pelo nosso colunista Fábio Primak. Clique aqui para participar.
Vamos aprender como centralizar uma página utilizando apenas CSS.
Olá pessoal, estamos aqui para mais um artigo, porém é o primeiro artigo sobre Tableless que eu faço!
Primeiramente queria agradecer aos sites: www.maujor.com e www.tableless.com.br aprendi muito com eles, e aconselho você que mexe, quer mexer ou então está migrando códigos antigos para essa nova metodologia, perder algumas horinhas nesses dois sites.
Bom, primeiramente vamos entender a teoria:
Afaste o objeto 50% do topo e da lateral esquerda. Feito isso recue a margem (topo e lateral esquerda) em metade de seu tamanho.
Confuso? Vamos à prática:
Supondo que você tenha uma div principal nesse exemplo denominada de geral, onde todos os objetos estarão dentro dela:
#geral {
position:absolute;
top:50%;
left:50%;
width:500px;
height:300px;
margin-left:-250px;
margin-top:-150px;
text-align:center;
}
O comprimento (width) e a altura (height) são variáveis, depende do tamanho da sua página. Deve-se ficar atento que em margin-left e margin-top é metade do valor negativo.
IMPORTANTE: Recebi vários e-mails de pessoas dizendo que o código margin:0 auto realiza a mesma função do que o código que descrevemos a cima. Mas lembrando que o margin:0 auto centraliza a página apenas horizontalmente. Já o código que vimos à cima centraliza tanto horizontalmente como verticalmente.
Por hoje é isso ai pessoal!
Fiquem com Deus e até a próxima.
Autor: Filipe - WebLivre
Compartilhe:
oscar em 27/06/2007
Felipe, é suficiente você utilizar o
margin 0 auto; abraço
alanquadros em 05/10/2006
Cara, :) muiito obrigado, realmente isso me dava mais trabalho antes de visualizar seu tutorial, e a idéia é simples :)
abração.
Hugo em 07/04/2006
Filipe, basta usar margin: 0 auto; que funciona!
marco em 23/03/2006
Olá, como é que eu defino no CSS que a minha página tem uma imagem de fundo e a tabela fica centrada, isto é, "Align=True"
cicero J. Gois em 23/01/2006
Preciso de uma Programação de Moldura
Evaldo em 14/12/2005
Man, valew mesmo. Procurei e li um montaum, mas nenhum deu certo. Valew!!!
doug em 11/12/2005
Apavorou cara!!!
sério, procurei pra ca****o isso, li uns tutoriais gigantes. esse eh O kra, explicou em 20 linhas tudo
valeu cara abraço
2004-2008 Weblivre.net Todos os direitos reservados.
Quem somos | Política de Acesso | Anuncie | Na Mídia | Seja um Colunista | Sugestão de Pauta | Fale Conosco
Idealização: Webla - Comunicação Digital