Linguagens para Internet

Linguagens Web

Centralizar imagem ou qualquer elemento na tela com CSS

Olá amigos. Hoje vou explicar como podemos centralizar imagem ou qualquer outro elemento na tela com CSS. Vou mostrar que é posível centralizar ima imagem tanto na horizontal quanto na vertical, independentemente da resolução de vídeo que o visitante esteja usando.

Com o mesmo procedimento conseguimos centralizar qualquer elemento. Usando de forma correta o CSS podemos centralizar imagem, div, parágrafo, título, em fim, qualquer elemento.

Importante

É importante salientar que, quando falamos em centralizar imagem ou qualquer outro elemento na tela, estamos falando de posicionamento. Então para que consigamos centralizar qualquer elemento, antes precisamos definir como ele será posicionado. De forma absoluta, relativa ou fixa.

Neste artigo vou mostrar como centralizar uma imagem na tela independentemente da resolução de vídeo que o visitante esteja usando. Vamos então ao que interessa?

Centralizar imagem ou qualquer elemento na tela com css

 

Centralizar imagem na tela com CSS

As propriedades que definem a posição do elemento (no nosso caso a imagem) na tela são: left, right, top, bottom.

Mas para que estas propriedades tenham efeito, precisamos definir a forma de posicionamento. Neste exemplo usaremos posicionamento fixo.

Veja abaixo o código CSS comentado:

1
2
3
4
#centralizar{
position:fixed; /* Forma de posicionamento - FIXA */
top:50%; /* Distante 50% do topo da tela do usuário */
left:50%; /* Distante 50% do lado esquerdo da tela do usuário */

O código acima posicionará a imagem de id “centralizar” de forma que seu canto superior esquerdo fique no centro da tela. Mas isso não é o que queremos. O objetivo do artigo é ensinar a centralizar imagem ou qualquer outro elemento com CSS.

Para concluir o nosso trabalho basta colocarmos uma margem negativa no topo com a metade do valor da altura da imagem, ou seja, nossa imagem possui 200px de altura e então precisamos colocar uma margem negativa de 100px.

Adotamos o mesmo procedimento para a margem esquerda. Inserimos uma margem esquerda negativa com a metade da largura da imagem. A imagem tem 250px de largura, então colocamos margem negativa de 125px.

Veja a margem negativa:

5
6
7
margin-top:-100px; /* Margem negativa para o topo com a metade do valor da altura da imagem */
margin-left:-125px; /* Margem negativa para a esquerda com a metade do valor da largura da imagem */
}

Clique aqui e veja um exemplo em funcionamento de como centralizar imagem ou qualquer elemento na tela com CSS.

Veja o código CSS completo:

1
2
3
4
5
6
7
#centralizar{
position:fixed; /* Forma de posicionamento - FIXA */
top:50%; /* Distante 50% do topo da tela do usuário */
left:50%; /* Distante 50% do lado esquerdo da tela do usuário */
margin-top:-100px; /* Margem negativa para o topo com a metade do valor da altura da imagem */
margin-left:-125px; /* Margem negativa para a esquerda com a metade do valor da largura da imagem */
}

Veja o código HTML:

1
2
3
<body>
      <img id="centralizar" alt="" src="http://www.linguagensparainternet.com/arquivos/centralizar-imagem-com-css/centralizar-imagem-com-css.jpg" />
</body>

download Faça download do arquivo clicando aqui.

exemplo centralizar imagem Veja um exemplo em funcionamento clicando aqui

Qualquer dúvida deixe um comentário abaixo.

, , , ,

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>