Centralizando objetos na tela com CSS

Veremos aqui como alinhar objetos no centro da tela, usando css. Usaremos como exemplo o alinhamento de uma imagem com DIV. Verifiquem que o processo é o mesmo caso queremos alinhar tabelas contendo textos ou imagens.

Agora vejamos:

A imagem possui um tamanho de 400 x 300, respectivamente, largura e altura (width e height).

Insira a imagem dentro de um DIV, como abaixo:

<div>
     <img src=”imagem.jpg” alt=”” />
</div>

Explicando o CSS:
Acompanhando o tamanho da imagem, ou seja, 400px x 300px, definiremos no CSS uma largura de 400px e uma altura de 300px que “guardará” a imagem:

width: 400px;
height: 300px;

É necessário entender que o alinhamento não é feito a partir do centro do objeto. Neste caso alinhamos pelas extremidades, onde o canto esquerdo superior passa ser o centro.

Então definimos:

position: absolute;

E também:
Distância de 50% a partir do topo e 50% a partir do lado esquerdo:

top: 50%;
left: 50%;

Para encerrar faremos uma espécie de hack do CSS:
Definiremos valores negativos para a imagem, mais precisamente nas margens do topo e esquerda. Os valores negativos serão exatamente a metade da altura e da largura da imagem, conforme abaixo:

margin-top: -150px;
margin-left: -200px;

Vejamos agora como deverá ficar o CSS final:

.center {
     width: 400px;
     height: 300px;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -150px;
     margin-left: -200px;
}

Veja como ficou o html:

<html>
     <head>
          <title>Título<title>
     </head>
     <body>
          <div  class=”center”><img src=”imagem.jpg” /></div>
     </body>
</html>

Isso também é possível:

<html>
     <head>
          <title>Título<title>
     </head>
     <body>
<table width=”400″ border=”0″ cellspacing=”0″ cellpadding=”0″>

               <tr> 
                    <td>
<div  class=”center”><img src=”imagem.jpg” /></div>
</td>
</tr>
</table>
</body>
</html>

Espero ter ajudado.

1 comentário

  1. Opa, e ai sergio… Beleza?
    Cara, uso muito isso, só tenho que apelar para o jQuery quando as dimensões não são fixas…

    Falows…

Deixe uma dúvida, resposta ou sugestão