0

Fiz uma div com um border bottom semelhante a uma dobra de uma pagina. tou tentando colocar uma imagem centralizada más o width e height nao esta funcionando. agradeço muito voces! :)

CODE:

.boxDobrado{
background:#53A3B4; /* color de fondo */
color: #FFFFFF; /* color de texto */
overflow: hidden;
position: relative;
width: 200px; /* ancho */
height:80px;
margin-left:20px;
}
.boxDobrado:before{
background: none repeat scroll 0 0 red; /* color de fondo */
border-color: white #ccc; /* color de esquina */
border-style: solid;
border-width: 0px 0px 40px 40px;
content: "";
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 0;
}
<div class="boxDobrado">
            <img src="imagem.jpg" height="50px" width="10px"/>
        </div>

1 Resposta 1

0

Pelo que entendi, você deseja centralizar o icone ou image, só precisa:

.boxDobrado{
background:#53A3B4; /* color de fondo */
color: #FFFFFF; /* color de texto */
overflow: hidden;
position: relative;
margin-left:20px;
width: 200px; 

/* alterado */
height:65px;  // ajuste de acordo com o height da imagem
text-align:center;
padding-top:5px; // ajuste de acordo com o height da imagem
}
<div class="boxDobrado">
            <img src="http://findicons.com/files/icons/1035/human_o2/128/orange_add_folder_to_archive.png" height="50px" width="50px"/>
        </div>

E ajuste o height de acordo com otamanho da imagem height:60px;

Exemplo

2
  • obrigado por comentar. más nao fica alinhado. é como se a imagem saisse da div. 25/12/2016 às 20:34
  • que erro grotesco que fiz. hehe funcionou adicionando .boxDobrado img{width:50px;heght:50px;} obrigado =) 25/12/2016 às 20:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .