Como centralizar uma página em Tableless

Olá pessoal, estamos aqui para mais um artigo, porém é o primeiro artigo sobre Tableless que eu faço!

Por | @oficinadanet Programação
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.

Aplicação:

    
    
    
        
TESTE

    



Por hoje é isso ai pessoal! Fiquem com Deus e até a próxima.

Mais sobre: css tableless especial_weblivre
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo