0 Compartilhamentos 560 Views 5 Comments

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!

Carregando...

Você pode se interessar

Promoções de Jogos do Final de Semana (25/09)
Notícias
12 visualizações
Notícias
12 visualizações

Promoções de Jogos do Final de Semana (25/09)

Carlos L. A. da Silva - 25 de setembro de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

Cinco alternativas ao Moment.js que você precisa conhecer agora
Artigos
12 visualizações
Artigos
12 visualizações

Cinco alternativas ao Moment.js que você precisa conhecer agora

Carlos L. A. da Silva - 25 de setembro de 2020

Biblioteca será aposentada, mas não é de hoje que já existem opções mais robustas no mercado.

Como desativar temporariamente sua conta do Facebook
Dicas
79 visualizações
Dicas
79 visualizações

Como desativar temporariamente sua conta do Facebook

Carlos L. A. da Silva - 19 de setembro de 2020

Preparado para um "detox" da rede social? O Facebook permite que você suspenda sua conta sem precisar apagá-la permanentemente.

5 Responses

  1. gostei da explicação…é simples…ó…cê pega o tscvirvistec e poe na posição xipatiskarepasteca e depois acerfta o corrivitersticulito junto com o justapecionetiléco que fica junto do vistoxisktrapitaco… entendeu? facim facim… vai te cata meu…

    Resposta
    • Ainda bem o que o HTML e CSS evoluiram muito de lá pra cá!! rsrs Essa técnica não é mais utilizada. Vale a pena buscar um framework como o Bootstrap, que já vai te apresentar solução pra esse tipo de problema pensando em todos os dispositivos. Abraços!

      Resposta

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (18/09)
Notícias
17 visualizações
17 visualizações

Promoções de Jogos do Final de Semana (18/09)

Carlos L. A. da Silva - 18 de setembro de 2020
O que você precisa saber sobre o Pix
Artigos
26 visualizações
26 visualizações

O que você precisa saber sobre o Pix

Carlos L. A. da Silva - 16 de setembro de 2020
Como centralizar no CSS de forma definitiva
Dicas
23 visualizações
23 visualizações

Como centralizar no CSS de forma definitiva

Carlos L. A. da Silva - 12 de setembro de 2020
Promoções de Jogos do Final de Semana (11/09)
Notícias
30 visualizações
30 visualizações

Promoções de Jogos do Final de Semana (11/09)

Carlos L. A. da Silva - 11 de setembro de 2020