Vejamos primeiro meu código de arquivo XHTML/HTML simples (parte). Nosso objetivo é centralizar #container horizontalmente.
<corpo>
<div id="contêiner">
<h1>conteúdo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>Usar margens adaptáveis (margem automática)
A maneira preferida de centralizar qualquer elemento horizontalmente é usar a propriedade margin e definir os valores esquerdo e direito como automático. Mas você deve especificar uma largura para #container.
div#contêiner {
margem esquerda: automático;
margem direita: automático;
largura: 168px;
}
Esta solução funciona em qualquer navegador moderno, até mesmo no IE6, desde que esteja em modo de conformidade com os padrões da web. Infelizmente não funcionará em versões anteriores do IE/Win. Criamos uma tabela para isso: Navegando na lista de suporte de borda adaptável Suporte à versão do navegador
Internet Explorer 6.0, modo de conformidade Sim
Internet Explorer 6.0, modo peculiares Não
Internet Explorer 5.5 Windows Não
Internet Explorer 5.0 Windows Não
Internet Explorer 5.2 Macintosh Sim
Todas as versões atuais do Mozilla são
Todas as versões do Mozilla Firefox são
Netscape 4.x Não
Netscape 6.x+ Sim
Opera 6.0, 7.0 Macintosh e Windows Sim
Safári 1.2 Sim
Embora limitado pelo suporte do navegador, a maioria dos designers incentiva você a fazer isso sempre que possível. Mas ainda podemos usar CSS para todas as situações. Usando alinhamento de texto (text-align) Esta solução requer o uso da propriedade text-align, que é aplicada ao elemento body e recebe o valor de center.
corpo{
alinhamento de texto:centro;
}
Faz justiça a todos os navegadores, é completo e está ao seu alcance. Porém, esta é uma propriedade dada ao texto, o que faz com que o texto no #container também seja centralizado. Portanto, temos que fazer algum trabalho adicional no layout:
div#contêiner{
alinhamento de texto: esquerda;
}
Desta forma, o alinhamento do texto pode retornar ao estado padrão. Bordas integradas e alinhamento de texto Como o alinhamento de texto é compatível com versões anteriores e os navegadores contemporâneos também suportam bordas adaptáveis, muitos designers os combinam para obter uso em vários navegadores.
corpo{
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
}
Infelizmente, ainda não é perfeito porque ainda é um hack. Você tem que escrever regras redundantes para organização do texto. Mas agora podemos usar uma solução mais perfeita para vários navegadores.
Solução de limite negativo