translations

Centralizando com CSS - diversão para todos!

Russ Weakley
08-Nov-03

This is a Portugese translation of CSS Centering - fun for all!.

Como você centraliza um bloco de conteúdo em uma página usando CSS? Há dois metodos principais e a escolha deve ser feita baseada no tipo de layout da página, "liquid" layout (o conteúdo da página se expande dependendo do tamanho da janela do browser) ou "fixed width" layout (o conteúdo não se move independente do tamanho da janela do browser).

Centralizando liquid layouts

Liquid layouts são faceis de serem centralizados usando margens de cada lado do bloco. A margens podem ser configuradas com unidades EM, Pixel ou Porcentagem.

div#container
{
margin-left: 10%;
margin-right: 10%;
}

Centralizando fixed-width layouts

Teoricamente, você deve ser capaz de aplicar auto-margins para as margens esquerda e direita do bloco e esse deve centralizar-se na página.

A W3C modelo de formatação visual diz: "Se ambos 'margin-left' e 'margin-right' são 'auto', eles terão valores iguais. Isto centralizará o elemento horizontalmente em relação aos limites do bloco."

Então, um bloco de conteúdo deve ser capaz de ser centralizado usando as seguintes regras:

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}

Porêm, alguns browsers não centralizam o bloco de conteúdo usando este método pois eles ignoram o auto-margem. Este browsers são:

Aplicando duas regras simples, esse problema pode ser superado em todos os browsers mencionados anteriormente, exceto o NN4.

1. Centralizar a tag body

Enquanto esses browsers ignoram auto-margens, eles seguirão "text-align: center". Se isso é aplicado a tag body, o bloco será centralizado corretamente. Então, adicionamos uma nova regra:

body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}

2. Reiniciando text-align

O único problema com esta nova regra é que todo conteúdo da página está agora centralizado. Para corrigir este problema, adicionamos uma nova declaração no conjunto de regras do bloco de conteúdo - "text-align: left". O código CSS final é:

body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}

Veja os resultados

O primeiro exemplo mostra um bloco de conteúdo que foi centralizado usando o auto-margem, mas a tag body não foi centralizada.

O segundo exemplo mostra um bloco de conteúdo que foi centralizado usando auto-margem, a tag body foi tambem centralizada usando "text-align: center" e o bloco de conteúdo recebe uma nova regra "text-align: left" para alinhar o seu conteúdo interno a esquerda.

O que você acha? Concorda ou discorda? Envie nos uma mensagem.