No post anterior, vimos como funcionam as dicas de CSS e quais são as principais diferenças entre os tipos de posicionamento CSS: relativo e absoluto. Neste post veremos algumas aplicações práticas para auxiliar quem pretende começar a empregar essas propriedades em seus layouts.
O modo mais comum de se centralizar um container em uma página é utilizando a propriedade “margin: 0 auto;”.
Entretanto, é possível centralizar um container utilizando a propriedade “position: relative”, juntamente com o elemento “lef: 50%”.
Para que o container fique devidamente centralizado é preciso fixar seu tamanho e atribuir uma margem esquerda negativa, pois o deslocamento de 50% para a esquerda, parte do canto esquerdo superior do objeto, e não de seu centro.
Suponhamos que você precise centralizar o conteúdo de uma página e que este conteúdo esteja envolvido em uma div container. Nesse caso, sua declaração CSS deverá ser semelhante à do exemplo abaixo:
#container { position: relative; left: 50%; margin-left: -495px; width: 990px; }
A vantagem desse tipo de declaração é que qualquer elemento, contido nesse container, que receba um posicionamento absoluto, se posicionará tomando como referência esse container.
Posicionar uma div absolutamente dentro de uma div posicionada relativamente é um recurso muito poderoso. Isso porque, se você simplesmente declarar uma div com “position: relative” ela não se comportará de maneira diferente, permanecerá no mesmo lugar e ocupando o mesmo espaço que antes de se ter utilizado tal declaração.
Porém, um elemento qualquer dentro dessa div declarado com “position: absolute” se posicionará absolutamente tendo a div relativa como referência.
Aproveite os comentários abaixo para deixar suas dúvidas e sugestões, participe!
