Hola buenas, Me surjio un problema que tengo ya casi resuelto, le falta la guinda, y es poder centrar el un <div> dentro de otro verticalmente, al poner margin:auto; lo centra horizontalmente pero no así verticalmente.
aquí os dejo el código, a ver si le encontráis solución:
HTML--->
Código HTML:
<div class="cag">
<div class="cag1">
<div class="cag2">
</div>
</div>
</div>
CSS--->
Código HTML:
.cag{
height:180px;
width:180px;
background:transparent;
position:relative;
display:inline-block;
}
.cag1{
height:125px;
width:125px;
background:#cccccc;
display:block;
position:relative;
margin:auto;
-webkit-transition:400ms ease-in-out;
-moz-transition:400ms ease-in-out;
-o-transition:400ms ease-in-out;
-ms-transition:400ms ease-in-out;
transition:400ms ease-in-out;
-moz-border-radius:63px;
-webkit-border-radius:63px;
-o-border-radius:63px;
border-radius:63px;
}
.cag1:hover{
padding:25px;
background:#cccccc;
-moz-border-radius:90px;
-webkit-border-radius:90px;
-o-border-radius:90px;
border-radius:90px;
}
.cag2{
height:125px;
width:125px;
background:url(images/cag.png) no-repeat center;
}
Aqui el enlace para verlo:
http://aganglada.web44.net
La idea es que el circulo crezca por todas sus partes igualmente sin que se mueva el de dentro. Muchas Gracias de Antemano!
