quarta-feira, março 07, 2007

Centralizar a página

Provavelmente você já quis centralizar a página que você fez na tela. Você pode ter recorrido ao uso de tabela para isso, mas sabe que não fez certo. Então aqui vai o jeito certo para colocar sua página de tamanho fixo no centro da tela:

#1 - Alinhe o "texto" para iExeplorer
É isso mesmo. Para Internet Explorer basta colocar um align-text: center no CSS da tag body, mas tome cuidado porque todo o conteúdo dentro dela ficará assim se você não puser um align-text: left, por exemplo.

body {
text-align: center;
}


Já para a tag da página, você pode colocar o alinhamento correto (padrão, a seu critério):

#pagina {
text-align: left;
}

#2 - Para o restante
Legal. Só que isso não funciona para Firefox. Para ele DIV não é texto. Você somente precisa dizer que as margens laterais da div página vão ficar com valor padrão, ou seja, margin: 0 auto.
Isso, simplesmente isso, faz como que o navegador coloque a div no centro, deixando as margens laterais iguais. No caso acima as margens superior e inferior estão com 0, mas você pode usar da maneira que você quiser.

#pagina {
margin: 0 auto;
}


Juntando os dois, teremos:

body {
text-align: center; /* gambiarra para iExplorer */
}

#pagina {
text-align: left; /* para corrigir a gambiarra do iExplorer */
margin: 0 auto; /* para navegadores padrão */
width: 760; /* só para definir uma largura */
border: #1 solid #000000; /* para a gente ver a div */
background-color: #FFFF99; /* um cor de fundo para animar um pouco */
}


HTML:

...
[body]
[div id="pagina"] Blablabla [/div]
[/body]
...

Abraço!

Um comentário:

Anônimo disse...

E aí cara, blz.
Eu to começando agora em webdesigner e ainda tenho algumas dúvidas então tava procurando isso em todo lugar na web e não achava, vlw mesmo, resolveu na hora o meu problema.