Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

MEDIA

Alinhar imagem horizontal e vertical

Por , em Desenvolvimento frontend

Recommended Posts

MEDIA    0

MEDIA
Postado

Pessoal gostaria de uma ajuda, já procurei na net mas não consegui entender muito bem como fazer para alinhar uma imagem ao centro absoluto tanto na horizontal como vertical, se alguém puder me ajudar serei eternamente grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Vai usar position: absolute para isso.

 

A lógica é a seguinte:

 

Quando for posicionar absolutamente com top: 50% e left: 50%, essas propriedades vão alinhar a partir do canto superior esquerdo. Para resolver esse problema, você vai ter que setar um margin-top com metade da altura da imagem negativo (então se a imagem tem 200px de altura, logo será margin-top: -100px) e a mesma coisa com o margin-left.

 

Essa é a lógica. Se não conseguir desenvolver o código, posta o que conseguiu e ajudaremos a desenvolver o resto.

 

:thumbsup: @thiagoretondar

Compartilhar este post

Link para o post
Compartilhar em outros sites

MEDIA    0

MEDIA
Postado

Thiago muito obrigado por me apontar o caminho a seguir, estou tentando alinhar a imagem ao centro absoluto como eu disse, fiz o código da forma que me falou simulei a imagem sendo uma div e a mesma fica no canto superior mesmo colocando os valores negativos segue o código, se puder dar uma olhada e me falar onde está errado

<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<title>Position Absolute by aprendacss.wordpress.com</title>
<style type="text/css">
#posiciona3{
background-color: #000000;
width: 291px;
height: 114px;
position: absolute;
margin-top: -57px;
margin-left: -145.5px;
}
</style>
</head>
<body>
<div id="posiciona3"></div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Tá certinho, só que esqueceu o principal. As propriedades top e left tongue.gif

 

Assim ó:

 

#posiciona3{
   background-color: #000000;
   width: 291px;
   height: 114px;
   position: absolute;
   margin-top: -57px;
   margin-left: -145.5px;
   top: 50%;
   left: 50%;
}

E não se esqueça de colocar um DocType ;)

 

:thumbsup: @thiagoretondar

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito