Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
Vlew mesmo.
mas nao entendi =/
>
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!
^_^
Considerando que o botão tenha 300px de largura e 100 de altura, o css ficaria como:
left:50%
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í!