Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Blog

Topo 17/10/06

Alinhamento horizontal e vertical

Quem já não desejou criar um layout centralizado no sentido horizontal? E na vertical? Ou os dois ao mesmo tempo?

A primeira opção não oferece grandes desafios, o que precisamos é só criar uma div que irá conter o site inteiro e centralizá-la:

O HTML fica da seguinte forma:
<html>
<head>
<body>
<div id="limites"></div>
</body>
</head>
</html>

Neste caso, criei a div “limites” que terá todo o conteúdo do site dentro de si e, agora, devemos centralizá-la via CSS (obviamente):

#limites { width: 700px; margin: 0 auto; }

Segundo esta regra no CSS, a div “limites” terá largura fixa de 700px, margin 0 tanto acima como abaixo dela, e margin automática na esquerda e direita, deixando o site centralizado.

Mas o grande problema é: como centralizar um layout no sentido vertical e horizontal ao mesmo tempo?

O único contra deste método é que vocę deverá ter um valor fixo de altura, ou seja, se o site aumentar o tamanho, não ficará mais centralizado verticalmente. Então vamos a ele:

O HTML permanece o mesmo, portanto, só teremos que editar o CSS, aplicando um valor fixo de largura e altura para a regra criada anteriormente, além de modificar as margens:

html, body { width: 100%; height: 100%; }

#limites { position: absolute; top: 50%; left: 50%; margin: -200px 0 0 -350px; width: 700px; height: 400px; }

Primeiramente devemos especificar um valor de largura e altura total do site, para que a div “limites” saiba o que tomar como referęncia para centralizar-se.

Agora note os ítens destacados. Inserimos um position: absolute; para a limites e, então, definimos seu posicionamento a 50% do topo do site e a esquerda do mesmo. Só que, se vocę testar, o site não ficará centralizado, ao contrário do esperado. Portanto, devemos aplicar um valor de margin negativo (top e left), relativo ŕ metade dos valores da altura e largura, no caso 200px e 350px respectivamente.

Desta forma, seu site ficará centralizado nos dois sentidos, desde que possua seus valores fixos em ambos os sentidos.

Trackback Feed deste artigo

13 comentários para "Alinhamento horizontal e vertical"

  1. Ivan | 17/10/06 - 2:00 pm

    Vale lembrar que a propriedade para ajuste horizontal não funciona no IE! Precisa colocar uma propriedade para alinhamento de texto.

    Topo
  2. Carlos Eduardo de Souza | 17/10/06 - 4:02 pm

    Mas a qual versão do IE vocę está se referindo?

    Testei no IE, do jeito que citei no artigo, e deu tudo certo.

    Topo
  3. Ivan | 17/10/06 - 7:13 pm

    Acho q a versão 6.. tenho q confirmar!

    Topo
  4. Jader Rubini | 18/10/06 - 10:39 am

    Muito bom.
    Mas são raros (raríssimos, aliás) os sites que podem se dar ao luxo de ter altura fixa.

    Topo
  5. Carlos Eduardo de Souza | 18/10/06 - 11:43 am

    Bom, depende do tipo de site.

    Me interessei em escrever como faz isso pois uns tempos atrás surgiu a necessidade.

    Acho que esse tipo de “técnica” é pertinente naqueles tipos de portfólios em que pode-se simular o efeito de ‘iframe’ com o overflow de divs… Aí a altura nunca muda :)

    Topo
  6. William Lopes | 5/12/06 - 9:16 pm

    Estou com uma dúvida sobre este assunto. Estrou construíndo um site todo em CSS pela primeira vez e fiz tudo conforme o tutorial acima. Está funcionando corretamente em todas as configuraçőes de vídeo, exceto 800 x 600.

    Meu css para a DIV para todo o conteúdo do site eu chamei de #page:

    #page
    {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -287px 0 0 -386px;
    width: 772px;
    height: 574px;
    font-size: 11px;
    font-family: Verdana;
    line-height: 12px;
    background: #fff;
    visibility: visible;
    }

    O html ficou semelhante ao seu:

    Em 800 x 600 o que aconteceu foi que o topo ficou deslocado para cima impedindo que eu visse mais de metade do seu conteúdo. Isso acontece em todos os navegadores. Aliás, aquele comentário do amigo Ivan, também foi necessário para mim, mas apenas quando quis centralizar somente horizontalmente. Quando quis centralizar para as duas direçőes deu este problema que citei acima.

    Agradeço a todos que puderem me ajudar.

    Topo
  7. Gabriel | 29/07/07 - 12:33 pm

    Parabesn pelo artigo ajudou muito!!!!!!!!

    Topo
  8. Luciano | 1/10/07 - 12:31 pm

    Prezado,

    Tive um problema com sua técnica, com o posicionar utilizando o top e o left 50% e diminuir as metades no margin.

    Se a janela do navegador ficar menor que o tamanho do elemento, o elemento fica cortado no topo.

    Tem alguma solução para isso?

    Topo
  9. Carlos Eduardo de Souza | 1/10/07 - 7:11 pm

    Infelizmente essa é uma limitação que a técnica oferece, até porque serve para os sites “convencionais”, nos quais é previsto que o usuário possuirá resolução compatível com as dimensőes do site.

    A técnica deve ser utilizada em sites com largura e altura pré-definidos e, portanto, não haveria porque fazę-la com grandes dimensőes.

    O que pode ser feito e, talvez funcione, seria definir uma largura e altura máxima para o body da página… Não testei, mas pode ser que algo nessa direção possa funcionar.

    Topo
  10. Heider | 2/04/08 - 9:38 am

    Amigão, vc tem algum exemplo de um site com estas propriedades?

    Topo
  11. Waldir Domingues de Araujo | 20/05/08 - 1:27 pm

    Meu site não fica centralizado no vídeo de 19 polegadas.
    Como proceder para acertar.
    Abs.

    Topo
  12. Alinhamento vertical e horizontal com CSS | Blog Web Standards | 22/04/09 - 7:07 pm

    […] Alinhamento horizontal e vertical […]

    Topo
  13. Bruno | 5/08/11 - 1:54 am

    Olha acabei de aprender CSS, posso quase dizer que o Domino mais eu gostaria de saber é um alinhamento horizontal dentro da DIV tipo assim:

    Eu quero que todo o conteudo da div fique centralizado por exemplo se eu usar assim:

    Bruno Henrique

    Neste caso o meu nome vai ficar alinhado no centro da página, e para o alinhamento vetical simplismente pode colocar o

    Vertical-align:top;

    para alinhar ao topo mais eu quero alinhar ao centro ao mesmo tempo no caso poderia ter um valor de mesma sintese do tipo.

    horizontal-align:center;

    certo, se puder me ajudar urgente agradeço
    estou fazendo um blog mais esse tipo de alinhamento eu estou com problemas.

    Topo
Comente este artigo
  1. (obrigatório)
  2. (obrigatório)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons