centralizando a imagem

[EllisonWilliam 0]

Pessoal quando eu crio uma div, e boto uma imagem dentro dela ela fica no canto encima

 

Exemplo : http://i1095.photobucket.com/albums/i469/wyllyams17/Untitled-1-1.png

 

Eu quero botar a imagem no centro exemplo o link da imagem abaixo

 

http://i1095.photobucket.com/albums/i469/wyllyams17/Untitled-1G.png

 

 

Oque eu fasso ? Pode ser em html ou css. por favor ajuda

 

Não ligue para o meu portugues ele e terrivel kk.

[Raalphs_ 0]

Se você quiser centralizar a imagem tanto na vertical como na horizontal, uma solução é trabalhar com a imagem dentro de um <span> e aplicar um estilo de posição ao mesmo. Exemplo:

<span class="botao"><img src="botao.png"></span>

 

Considerando que o botão tenha 300px de largura e 100 de altura, o css ficaria como:

 

.botao {

top:50%;

left:50%

margin-top: -50;

margin-left: -150;

}

 

onde em margin-top e margin-left você deve inserir metade ta altura e largura do botão em valor negativo, pra que dessa forma o centro do botão esteja realmente no centro da sua div.

 

eu pessoalmente faria da segunda forma...

 

espero ter ajudado..

Boa sorte aí!

[EllisonWilliam 0]

Vlew mesmo.

 

mas nao entendi =/

[Raalphs_ 0]

Vlew mesmo.

 

mas nao entendi =/

 

Basicamente é o seguinte...

 

dentro da div utiliza um código assim:

 

<span class="botao"><img src="botao.jpg"></span>

 

onde, o botao.jpg dentro do img você troca pelo nome da imagem que você tem.

 

Agora o css para alinhamento dele deve ser o seguinte:

 

.botao {

top:50%;

left:50%

}

 

porém essa forma só funcionará se você inserir no css o seguinte código:

 

html {

height:100%;

}

body {

height:100%;

}

 

mas ainda não terminou... tudo isso fará com que o seu botão fique iniciando no meio, mas não totalmente centralizado... (podes fazer o teste para reparar isso).

Resolver esse problema é moleza... imaginamos que esse botão que você queira inserir no meio da div tenha 300px de largura e 100px de altura...

o que você deve fazer é reduzir metade desses valores de cada margem... 150 da esquerda e 50 da superior. Para isso utilizaremos o margin-left e margin-top, respectivamente.

 

Insira então dentro do estilo esses comandos... deverá ficar assim:

 

.botao {

top:50%;

left:50%

margin-left:-150px; /* 'empurra' o botão 150px para a esquerda */

margin-top:-50px; /* 'empurra' o botão 50px para cima */

}

 

Dessa forma sim, seu botão estará perfeitamente centralizado...

Apenas lembres de trocar o nome da imagem pelo que você está utilizando e alterar os valores do margin-left e margin-top para os equivalentes à sua imagem.

 

Abraço aí...

e de novo, Boa sorte!

^_^