Tengo una duda, y los posts que encontre en el buscador, no me ayudaron a solucionarlo.
Estoy iniciando en el mundo del CSS, y me es imposible centrar una imagen con un border-radius 50%, no importa lo que haga, siempre me queda estatica, no importa si cambio los margin o lo que haga.
Paso el codigo a ver si alguién puede darme una mano.
HTML.
Código HTML:
Ver original
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="index_style.css"> </head> <body> <div id="home" class="container"> <img id="icon" alt="" src="pictures/icon1.png"> </div> <header> <div class="contenedor" id="uno"> <img class="icon" src="pictures/icon1.png"> </div> <div class="contenedor" id="dos"> <img class="icon" src="pictures/icon2.png"> </div> <div class="contenedor" id="tres"> <img class="icon" src="pictures/icon3.png"> </div> <div class="contenedor" id="cuatro"> <img class="icon" src="pictures/icon4.png"> </div> <div class="contenedor" id="cinco"> <img class="icon" src="pictures/icon5.png"> </div> <div class="contenedor" id="seis"> <img class="icon" src="pictures/icon6.png"> </div> </header> </body> </html>
CSS
Código CSS:
Ver original
*{ margin: 0px; padding: 0px; font-family: Helvetica; } header{ margin: auto; margin-top: 300px; margin-left: auto; width: 1200px; height: 230px; background-color: #f80808; } div.contenedor{ width: 200px; height: 230px; float: left; -webkit-transition:height .4s; /*transicion, del DIV*/ } div#uno{ background-color: rgb(208,101,3); } div#dos{ background-color: rgb(233,147,26); } div#tres{ background-color: rgb(22,145,190); } div#cuatro{ background-color: rgb(22,107,162); } div#cinco{ background-color: rgb(27,54,71); } div#seis{ background-color: rgb(21,40,54); } img.icon{ display: block; margin: 50px auto; background-color: rgba(255,255,255,0.15); width: 40px; padding: 20px; -webkit-border-radius: 50%; -webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0); /*sombra de los iconos*/ -webkit-transition:box-shadow .4s; } p.texto{ font-size: 1.2em; color:white; text-align: center; padding-top:10px; opacity: .6; -webkit-transition:padding-top .4s; } div.contenedor:hover{ height:250px; } div.contenedor:hover p.texto{ padding-top: 30px; opacity: 1; } div.contenedor:hover img.icon{ -webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,255,.6); } body { background-color: #ccc; } div#home{ background-color: #FF5E3A; } div.container{ width: 200px; height: 200px; border-radius: 50%; } #icono{ display: block; margin: auto; }
Alguno me podría explicar adonde me equivoque?
gracias!