Esta é uma dúvida recorrente entre todas as pessoas que estão começando a usar CSS para montar o layout de sites. Além disso o comportamento para alinhamentos não funciona de forma homogênea, tendo em vista que o Internet Explorer (sempre ele) trata as bordas de maneira diferente do mundo... Por isso vamos a uma solução global.
Suponhamos que o código entre as suas tags BODY seja assim:
<body>
<div id="div_geral">
Aqui vai o resto do site
</div>
</body>
O seu trecho de CSS deve ser da seguinte forma, para alinhar em todos os browsers:
body {
text-align: center;
}
#div_geral {
text-align: left;
margin: 0 auto;
}
O atributo text-align no marcador BODY diz para o IE alinhar todo conteúdo pelo centro da página. Em qualquer outro browser que não o IE, este comando afeta somente elementos visíveis como texto, o que é o certo. Por isso, quando definimos as propriedades da ID de div #div_geral, dizemos primeiramente para resetar o alinhamento à esquerda, e em seguida vemos o atributo margin com valor 0 (zero) auto. Mas o que isso significa?
Bem, o atributo margin pode ter até quatro propriedades:
margin: 10px 20px 10px 20px;
Estas propriedades se referem respectivamente às margens superior, direita, inferior e esquerda do elemento. Se for trabalhada em pares, ou seja, fornecendo apenas duas propriedades, ela trata o topo com o valor da primeira propriedade e o espaçamento à esquerda e à direita com o valor da segunda propriedade. Note que, neste exemplo, a segunda propriedade tem o valor auto. Isto significa que o browser pega todo o espaço em volta do elemento e divide-o igualmente entre as margens esquerda e direita do elemento, resultando desta forma no desejado alinhamento centralizado.
Na verdade, parece complicado, mas com o tempo você verá que é bem simples. E espero assim estar acabando com a sua desculpa para ainda usar tabelas para montar estruturas de layout...
Abraços e até a próxima.
2 comentários:
obrigado pela dica foi uma grande ajuda! :)
Obrigado, também me deu uma ajuda aqui, valeww!!
Postar um comentário