Home > Web Design > Centrar páginas ou tabelas na horizontal com CSS

Centrar páginas ou tabelas na horizontal com CSS

Novembro 24th, 2006

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é 8)

Web Design

  1. No comments yet.
  1. No trackbacks yet.