Centralizar um elemento com CSS não é uma questão simples – a mesma configuração válida de centralização de CSS se comporta de maneira diferente em navegadores diferentes. Vamos primeiro dar uma olhada em vários métodos comuns em CSS para centralizar elementos horizontalmente.
1. Use margens automáticas para obter centralização A maneira preferida de centralizar um elemento horizontalmente em CSS é usar o atributo margin - basta definir os atributos margin-left e margin-right do elemento como automático. No uso real, podemos criar uma div que atua como um contêiner para esses elementos que precisam ser centralizados. Uma coisa a observar em particular é que a largura deve ser especificada para o contêiner:
div#container {
margin-left: auto;
margin-right: auto;
width: 168px
}
Este método funciona muito bem na maioria dos principais navegadores, mesmo o IE6 na plataforma Windows, em seu modo de compatibilidade de padrões (modo de conformidade) também pode ser usado. exibido normalmente. Mas, infelizmente, em versões inferiores do IE, esta configuração não atinge o efeito de centralização. Portanto, se quiser usar este método em projetos reais, você deve garantir que a versão do navegador IE do usuário não seja inferior a 6.0.
Embora o suporte não seja o ideal, a maioria dos designers recomenda usar essa abordagem sempre que possível. Este método também é considerado o mais correto e razoável entre vários métodos para obter a centralização horizontal de elementos usando CSS.
2. Use text-align para obter a centralização. Outra maneira de obter a centralização dos elementos é usar o atributo text-align. Defina o valor do atributo como centralizado e aplique-o ao elemento body. Essa abordagem é um hack completo, mas é compatível com a maioria dos navegadores, por isso é naturalmente necessária em alguns casos.
A razão pela qual é chamado de hack é que este método não aplica o atributo text ao texto, mas ao elemento que é o contêiner. Isso também cria trabalho extra para nós. Após criar as divs necessárias para o layout, precisamos aplicar o atributo text-align ao body conforme o seguinte código:
body{
text-align:center
}
Haverá algum problema depois disso? Todos os elementos descendentes de body serão exibidos centralizados.
Portanto, precisamos escrever outra regra para retornar o texto ao alinhamento padrão à esquerda:
p {
alinhamento de texto: esquerda;
}
Você pode imaginar que esta regra adicional causará alguns inconvenientes. Além disso, os navegadores que realmente atendem integralmente aos padrões não alterarão a posição do contêiner, apenas centralizarão o texto dentro dele.
3. Use margens automáticas e alinhamento de texto em combinação Como o método de alinhamento e centralização de texto tem boa compatibilidade com versões anteriores, e o método de margem automática também é suportado pela maioria dos navegadores contemporâneos, muitos designers usam uma combinação dos dois para criar efeitos de centralização. obtenha suporte máximo entre navegadores:
body {
alinhamento de texto: centro;
}
#contêiner {
margem esquerda: automático;
margem direita: automático;
borda: 1px vermelho sólido;
largura: 168px;
alinhamento de texto: esquerda
}
Mas isso ainda é um hack e não é perfeito de forma alguma. Ainda precisamos escrever regras adicionais para centralizar o texto no contêiner, mas pelo menos fica bem em todos os navegadores.
4. Solução de margem negativa A solução de margem negativa é muito mais do que apenas adicionar margens negativas aos elementos. Este método requer o uso de posicionamento absoluto e margens negativas.
A seguir está o método de implementação específico desta solução. Primeiro, crie um contêiner que contenha o elemento centralizado e, em seguida, posicione-o absolutamente a 50% da borda esquerda da página. Dessa forma, a margem esquerda do container começará em 50% da largura da página.
Em seguida, defina o valor da margem esquerda do contêiner como metade negativa da largura do contêiner. Isso irá ancorar o contêiner no ponto médio horizontal da página.
#contêiner {
plano de fundo: #ffc url (mid.jpg) centro de repetição;
posição: absoluta;
esquerda: 50%;
largura: 760px;
margem esquerda: -380px;
}
Veja, não há hack! Embora esta não seja a solução preferida, é uma boa abordagem e funciona extremamente bem - funciona até no Netscape Navigator 4.x sem problemas, o que é surpreendente, não é? Portanto, se você deseja o suporte mais amplo ao navegador, este método será a melhor escolha.