[CSS/DIV] Resolve perfeitamente o centralizamento horizontal de páginas CSS

Um método comum de CSS para centralizar elementos horizontalmente

Centralizar elementos com CSS não é algo trivial – as mesmas configurações legítimas de centralização de CSS se comportam de forma diferente em navegadores diferentes. Vamos começar olhando algumas maneiras comuns de centralizar elementos horizontalmente em CSS.

1. Centralização com margens automáticas

A maneira preferida de centralizar elementos horizontalmente no CSS é usar a propriedade margem — basta definir as propriedades margem-esquerda e margem-direita para auto. No uso prático, podemos criar um div de contêiner para esses elementos que precisam ser centralizados. Uma coisa a se notar é que a largura do recipiente deve ser especificada:

div#container{ margin-left:auto; margem-direita:auto; largura: 168px; }

Essa abordagem funciona muito bem na maioria dos navegadores principais, até mesmo o IE6 no Windows pode ser exibido corretamente em seu modo padrão de conformidade. Infelizmente, em versões inferiores do IE, essa configuração não alcança um efeito de centralização. Então, se você quiser usar esse método em um projeto real, certifique-se de que a versão do navegador IE do usuário não seja inferior a 6.0.

Apesar da falta de apoio, a maioria dos designers recomenda usar essa abordagem o máximo possível. Esse método também é considerado o mais correto e razoável de todos os métodos para implementar centralização em nível de elemento com CSS.

2. Use o alinhamento de texto para alcançar o centralizamento

Outra forma de conseguir o centralizamento dos elementos é usar a propriedade text-align, definir o valor da propriedade para centralizar e aplicá-lo ao elemento do corpo. É um hack completo, mas é compatível com a maioria dos navegadores, então é naturalmente essencial em alguns casos.

Isso é chamado de hack porque esse método não aplica propriedades de texto ao texto, mas sim ao elemento que é o contêiner. Isso também nos dá trabalho extra. Após criar os divs necessários para o layout, precisamos aplicar a propriedade text-align ao corpo de acordo com o seguinte código:

corpo{ text-align:center; }

Haverá algum problema depois disso? Todos os descendentes do corpo são centrados.

Portanto, precisamos escrever outra regra para retornar o texto ao alinhamento padrão à esquerda:

p{ text-align:left; }

É concebível que essa regra adicional cause algum inconveniente. Além disso, um navegador que realmente segue o padrão não muda a posição do contêiner, apenas centraliza o texto dentro dele.

3. Use uma combinação de margens automáticas e alinhamento de texto

Como o método de centralização de alinhamento de texto tem boa compatibilidade retroativa, e o método de preenchimento automático também é suportado pela maioria dos navegadores contemporâneos, muitos projetistas usam uma combinação dos dois para maximizar o suporte entre navegadores para o efeito de centralização:

corpo{ text-align:center; } #container{ margin-left:auto; margem-direita:auto; borda: 1pxsolidred; largura: 168px; text-align:left }

Mas isso é sempre um truque, e não é perfeito de forma alguma. Ainda precisamos escrever regras adicionais para o texto no contêiner centralizado, mas pelo menos ele fica bom em vários navegadores.

4. Solução de margem externa negativa

Soluções de margens negativas estão longe de ser tão simples quanto adicionar margens negativas aos elementos. Esse método requer o uso tanto de posicionamento absoluto quanto de técnicas de margem negativa.

A seguir está o método específico de implementação desse esquema. Primeiro, crie um contêiner com elementos centralizados e posicione-o absolutamente 50% da borda esquerda da página. Dessa forma, a margem esquerda do recipiente começará em 50% da largura da página.

Depois, defina o valor da margem esquerda do contêiner para metade da largura negativa do contêiner. Isso vai fixar o recipiente no ponto médio da direção horizontal da página.

#container{ fundo:#ffcurl(mid.jpg)repeat-ycenter; posição: absoluta; esquerda: 50%; largura: 760px; margem-esquerda:-380px; }

Olha, nada de truques! Embora essa não seja a solução preferida, é uma boa forma de fazer e é muito versátil – surpreendentemente, nem funciona no NetscapeNavigator 4.x sem problemas, não é? Então, se você quer a maior variedade possível de suporte para navegadores, esse método será a melhor escolha.