Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

berkowitz

Alinhamento tableless

Por , em Desenvolvimento frontend

Recommended Posts

berkowitz    2

berkowitz
Postado

Pessoal, olá! Tudo frmz??

 

Estou construindo meu primeiro layout tableless cross-browser e to apanhando em algumas coisinhas! ehehehee....

To precisando da seguinte ajuda: Como faço para centralizar a minha página verticalmente na tela?? Horizontal eu já consigo, mas vertical não http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

 

Alguém pode me dar um help por favor????

 

VALEWWWW!!!! :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

THE_WATCHER    0

THE_WATCHER
Postado

Tem um jeito que centraliza qualquer objeto na tela, horizontalmente e verticalmente. Crie uma camada ao redor do layout... digamos que essa camada tenha 800 de largura e 400 de altura. Então, é só criar no CSS a formatação desta camada:

 

<style>#layer {position: absolute; width:800px; height: 400px; left: 50%; top: 50%; margin-left: -400px; margin-top: -200px;}</style>

Entendeu? É só deixar sempre o left e top com 50%; a margin-left é a metade da width negativo, e a margin-top é metade da height negativo.

O HTML poderia ficar assim:

 

<html><head><style type="text/css">#layer {position: absolute; width:800px; height: 400px; left: 50%; top: 50%; margin-left: -400px; margin-top: -200px;}</style></head><body><div id="layer"> conteudodosite</div></body></html>

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

pow, faz uma busca ae... tinha um topico com essa mesma duvida... ;)

 

tem q tomar cuidado em usar isso, pq a altura do conteudo naum pode ultrapassar o tamanho da area util... se ultrapassar, com o posicionamento negativo, ele empurra seu layout pra cima, naum dando pra ver um poko do topo... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito