0 Compartilhamentos 42 Views

Centralizar uma página na tela

28 de dezembro de 2006

Nesta dica vou mostrar como centrar uma página na tela, independente da resolução ou tamanho do monitor usado pelo visitante.

O “truque” consiste em englobar todo o documento dentro de uma div e estilizá-la com umas regras CSS bem simples.

Em geral, uma página centralizada na tela é dimensionada para uma largura que se acomode numa tela com resolução de 800 x 600 px. Vamos então admitir esta hipótese de largura 800px para nossa página.

A largura total da div que engloba a página toda a qual chamaremos #tudo será adotada igual a 760px ( este valor é bastante cômodo, para garantir que em nenhum browser apareça uma barra de rolagem horizontal em 800 x 600 de resolução. Se você costuma projetar com valores diferentes use-o, mas certifique-se da eliminação da rolagem horizontal em 800 x 600).

Então estamos acertados em uma largura de 760px. Se você simplesmente definir esta largura para a div ela será colocada no canto esquerdo da tela!

A propriedade CSS margin faz o “truque”. Basta definirmos que as margens esquerda e direita serão automáticas, pois CSS prevê o valor auto para as margens.

É assim: CSS dimensiona a div com a largura especificada e coloca margens esquerda e direita IGUAIS. Se a tela tem largura de 1024px, CSS calcula 1024px – 760px = 264px e coloca margens laterais de 264px / 2 = 132px CENTRANDO A PÁGINA qualquer que seja a resolução.

MAS QUE DROGA! O Internet Explorer interpreta errado a regra como ela foi mostrada acima. Ela funciona e centraliza a página em todos os brownsers, menos no IE 🙁

Devemos então usar um artifício (hack) para fazer funcionar no IE. Basta declarar text-align:center; no elemento body da página e isto resolve, mas cria outro problema. Além de centralizar no IE coloca os textos também centralizados na página. E, para corrigir isto declaramos na #tudo, text-align:left; UFA! obrigado ao IE pelos seus “bugs” para as CSS.

Na parte codigo esta o codigo completo para você copiar e colar no seu editor e fazer mudanças para entender como colocar uma página centrada na tela.

Bons Estudos!

Você pode se interessar

DICA EXTRA: Prepare seu Currículo de Programador // Vlog #53.1
Vídeos
17 visualizações
Vídeos
17 visualizações

DICA EXTRA: Prepare seu Currículo de Programador // Vlog #53.1

Gabriel Fróes - 9 de outubro de 2017

No último vídeo do canal demos algumas dicas sobre como preparar seu currículo para uma vaga de programador mas esquecemos de uma dica super importante que falaremos nesse vídeo.

Confira os principais trailers da New York Comic Con 2017
Notícias
26 visualizações
Notícias
26 visualizações

Confira os principais trailers da New York Comic Con 2017

Carlos L. A. da Silva - 9 de outubro de 2017

Festa dos quadrinhos foi palco de trailers de mega-produções do cinema e séries de TV: Liga da Justiça, The Walking Dead e novo Círculo de Fogo. Confira!

Google teria encontrado indícios de anúncios patrocinados pelo governo russo em sua plataforma
Notícias
9 visualizações
Notícias
9 visualizações

Google teria encontrado indícios de anúncios patrocinados pelo governo russo em sua plataforma

Carlos L. A. da Silva - 9 de outubro de 2017

Segundo o jornal The Washington Post, empresa teria começado sua investigação depois de casos similares no Twitter e no Facebook.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Executivo da Microsoft confirma desinteresse no Windows Phone
Notícias
27 visualizações
27 visualizações

Executivo da Microsoft confirma desinteresse no Windows Phone

Carlos L. A. da Silva - 9 de outubro de 2017
Elon Musk critica Google Clips
Notícias
25 visualizações
25 visualizações

Elon Musk critica Google Clips

Carlos L. A. da Silva - 9 de outubro de 2017
Michel Temer vetou emenda que poderia censurar a internet
Notícias
24 visualizações
24 visualizações

Michel Temer vetou emenda que poderia censurar a internet

Carlos L. A. da Silva - 9 de outubro de 2017