Hola estoy haciendo un div con hover y no me centra los div y no sé qué pueda estar haciendo mal. Ayuda por favor. Pasaré el cod.
<!doctype html>
<html lang="es">
<head>
<title> Prueba</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="prueba.css">
</head>
<body bgcolor="#2f4544">
<center><img src="fondo.jpg"></center>
<div id="header"></div>
<div class="contenedor" id="uno">
<a href="NewProject.html"><img class="icon" src="imagen/home.png"></a>
<p class="texto">Inicio</p>
</div>
<div class="contenedor" id="dos">
<a href="compania.html"><img class="icon" src="imagen/compania.png"></a>
<p class="texto">Nuestra Compañía</p>
</div>
<div class="contenedor" id="tres">
<a href="productos.html"><img class="icon" src="imagen/productos2.png"></a>
<p class="texto">Productos</p>
</div>
<div class="contenedor" id="cuatro">
<a href="promo.html"><img class="icon" src="imagen/promo.png"></a>
<p class="texto">Promo del Mes</p>
</div>
<div class="contenedor" id="cinco">
<a href="clientes.html"><img class="icon" src="imagen/clientes2.png"></a>
<p class="texto">Clientes</p>
</div>
<div class="contenedor" id="seis">
<a href="contacto.html"><img class="icon" src="imagen/contactos.png"></a>
<p class="texto">Contacto</p>
</div>
</header>
</body>
</html>
////////////////////////////////////////////////////////////////////////////////////////////
*{
margin:0px;
padding:0px;
font-family: arial;
color:white
}
#header{
margin:0px auto;
width:960px;
height:180px;
background-color: rgb(14, 161, 156);
}
div.contenedor{
margin:0px;
width:160px;
height: 180px;
float:left;
-webkit-transition: height .4s;
-webkit-box-shadow: 4px 4px 7px 1px #191d1c;
}
div#uno{
background-color: rgb(10, 115, 111);
}
div#dos{
background-color: rgb(12, 138, 133);
}
div#tres{
background-color: rgb(14, 161, 156);
}
div#cuatro{
background-color: rgb(16, 184, 178);
}
div#cinco{
background-color: rgb(18, 207, 200);
}
div#seis{
background-color: rgb(40, 235, 228);
}
img.icon{
display: block;
margin:30px auto;
background-color: rgba(255,255,255,.15);
width:40px;
padding:20px;
-webkit-border-radius: 50%;
-webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);
-webkit-transition:box-shadow .4s;
}
p.texto{
font-size: 3;
color:white;
text-align: center;
padding-top:0px;
opacity: .9;
-webkit-transition: padding-top .4s;
font-family: arial;
}
p.historia{
font-size: 3;
color:white;
text-align: justify;
padding-top:0px;
opacity: .9;
-webkit-transition: padding-top .4s;
font-family: verdana;
}
div.contenedor:hover{
height:200px;
}
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);
}
gracias de antemano
