NICRUO.COM

Boas tardes meus amigos, hoje temos mais um artigo.

Hoje vamos aprender como se centram páginas ou tabelas na horizontal somente recorrendo a propriedades css.Em tempo deparei-me com uma certa dificuldade em centrar um layout na horizontal do meu browser usando propriedades css. Pesquisei na net e encontrei várias técnicas. Mas perguntam vocês, qual é o problema de centrar algo na horizontal com css? Incompatibilidades de browsers. Pois é, se os browsers chegassem a um consenso, a vida dos webdesigners seria facilitada.

Mas vamos ao que interessa:

No nosso exemplo de centrar página, iremos usar uma div com o id “container” que será a nossa div global que será centrada. A restrição desta técnica é que a div terá de ter uma largura fixa especificada com a propriedade “width” de css (apesar de achar que se possa usar min-width para os outros casos mas não ter a certeza neste momento, alguém que me tire esta dúvida). Na nossa folha de css teremos o seguinte:

body
{
 margin: 0; /* para evitar margens */
 text-align: center; /* Para corrigir um bug do Internet Explorer */
}

#container
{
 margin-left: auto;
 margin-right: auto;
 width: 800px; /* Já mencionado no iní­cio  */
}

Agora para centrar usarei uma técnica mais actual. Ou seja, em browsers antigos ( IE 5, etc ) não vai funcionar correctamente ( odeio estar preso a browsers obsoletos). Neste exemplo teremos uma tabela. O nosso A nossa folha de css será:

table
{
 margin-left: auto;
 margin-right: auto;
 text-align: center; /* Se também o texto dentro estiver que estar alinhado */
}

Espero que seja uma ajuda para quem luta com os browsers diáriamente.

Inté