Seguindo a linha de pensamento do artigo anterior sobre Centro Absoluto com CSS, vamos ver como centralizar horizontalmente um site que não tem altura definida, exemplo disso um portal.
Geralmente se utiliza para um site padrão, salvo exceções, um largura de no máximo 780 pixels, porém aqui utilizaremos a largura padrão de 770px. Vejamos o exemplo abaixo no qual alinharemos o corpo do site no centro, e deixaremos a altura para ser definida conforme o conteúdo.
Exemplo:
Como falei, nesse exemplo utilizaremos a largura de 770 pixles, e vamos centralizar ele perfeitamente com CSS e uma layer (DIV) no HTML. Veja abaixo.
Parte CSS como no outro exemplo, você coloca com a TAG <style> antes de fechar o <head> do HTML ou então chamando de um arquivo.css externo que você criou. Ao lado de cada comando colocarei a explicação.
Linha 1: Esse será o nome (ID) da DIV que utilizaremos
Linha 2: Esse comando posiciona de forma absoluta ao BODY do HTML
Linha 3: Aqui dizemos ao HTML que nossa DIV estará a 50% de distância da margem esquerda
Linha 4: Como será um alinhamento para um portal, teremos de deixar ele bem no topo da página, assim setando ele para que esteje a 0px do topo
Linha 5: Especificamos a largura da nossa DIV
Linha 6: Aqui vem o “pulo do gato” como no outro exemplo, quando definimos o centro com o left em 50%, achamos o centro horizontal absoluto do BODY do HTML, mas lembre-se que temos de descontar um valor da margem, que é feito tirando a metade do valor da largura de nossa DIV com a margem negativa.
Parte HTML
Basta você colocar dentro do BODY a DIV com o ID que você criou. E colocar o conteudo do site dentro.
<div id=”website”></div>
LessCSS – Saiba Como Utilizar
SEO: O Segredo do Sucesso nos Buscadores ??
CSS Reset – Você sabe o que é e por que usar ??
