Foros del Web - Ver Mensaje Individual

gonza182 · #1 (**permalink**) 12/07/2014, 17:27

Buenas tardes a todos,

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">
    <title>Menu efecto Hover</title>
    <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">
            <p class="texto">Home</p>
        </div>
 
        <div class="contenedor" id="dos">
            <img class="icon" src="pictures/icon2.png">
            <p class="texto">Pagina</p>
        </div>
 
        <div class="contenedor" id="tres">
            <img class="icon" src="pictures/icon3.png">
            <p class="texto">Google</p>
        </div>
 
        <div class="contenedor" id="cuatro">
            <img class="icon" src="pictures/icon4.png">
            <p class="texto">Apple</p>
 
        </div>
 
        <div class="contenedor" id="cinco">
            <img class="icon" src="pictures/icon5.png">
            <p class="texto">HTML 5</p>
 
        </div>
 
        <div class="contenedor" id="seis">
            <img class="icon" src="pictures/icon6.png">
            <p class="texto">Correo</p>
 
        </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!