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
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…