Tema: Mi div contenedor no centra
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/09/2014, 12:05
silmasur
 
Fecha de Ingreso: septiembre-2014
Mensajes: 2
Antigüedad: 10 años, 2 meses
Puntos: 0
Pregunta Mi div contenedor no centra
Tengo un div contenedor y no me centra. Este el es cod

Código HTML: 
Ver original
  1. <!doctype html>
  2.  
  3. <html lang="es">
  4.  
  5.     <head>
  6.             <title> Prueba</title>
  7.             <meta charset="utf-8"/>
  8.             <link rel="stylesheet" href="prueba.css">
  9.             
  10.                 
  11.     </head>    
  12.         <body bgcolor="#2f4544" id="body">    
  13.             
  14.             <center><img src="fondo.jpg"></center>    
  15.             <div id="header"></div>
  16.  
  17.         <div class="contenedor" id="uno">
  18.             <a href="NewProject.html"><img class="icon" src="imagen/home.png"></a>
  19.             <p class="texto">Inicio</p>
  20.         </div>
  21.  
  22.         <div class="contenedor" id="dos">
  23.             <a href="compania.html"><img class="icon" src="imagen/compania.png"></a>
  24.             <p class="texto">Nuestra Compañía</p>
  25.         </div>
  26.  
  27.         <div class="contenedor" id="tres">
  28.             <a href="productos.html"><img class="icon" src="imagen/productos2.png"></a>
  29.             <p class="texto">Productos</p>
  30.         </div>
  31.  
  32.         <div class="contenedor" id="cuatro">
  33.             <a href="promo.html"><img class="icon" src="imagen/promo.png"></a>
  34.             <p class="texto">Promo del Mes</p>
  35.         </div>
  36.  
  37.         <div class="contenedor" id="cinco">
  38.             <a href="clientes.html"><img class="icon" src="imagen/clientes2.png"></a>
  39.             <p class="texto">Clientes</p>
  40.         </div>
  41.         
  42.         <div class="contenedor" id="seis">
  43.             <a href="contacto.html"><img class="icon" src="imagen/contactos.png"></a>
  44.             <p class="texto">Contacto</p>
  45.         </div>
  46.  
  47.     </header>
  48.  
  49. </body>    
  50.  
  51. </html>
Código CSS: 
Ver original
  1. *{
  2. margin:0px;
  3. padding:0px;
  4. font-family: arial;            
  5. color:white
  6. }        
  7.  
  8. #header{
  9.     margin:0px auto;
  10.     width:960px;
  11.     height:180px;
  12.     background-color: rgb(14, 161, 156);
  13.     
  14. }
  15.  
  16. div.contenedor{
  17.     margin:0px;
  18.     width:160px;
  19.     height: 180px;
  20.     float:left;
  21.     -webkit-transition: height .4s;
  22.     -webkit-box-shadow: 4px 4px 7px 1px  #191d1c;
  23.     
  24. }
  25.  
  26. div#uno{
  27.     background-color: rgb(10, 115, 111);
  28.     
  29. }
  30.  
  31. div#dos{
  32.     background-color: rgb(12, 138, 133);
  33.     
  34. }
  35.  
  36. div#tres{
  37.     background-color: rgb(14, 161, 156);
  38.     }
  39.  
  40.  
  41. div#cuatro{
  42.     background-color: rgb(16, 184, 178);
  43.     
  44. }
  45.  
  46. div#cinco{
  47.     background-color: rgb(18, 207, 200);
  48.     
  49. }
  50.  
  51. div#seis{
  52.     background-color: rgb(40, 235, 228); 
  53.  
  54. }
  55.  
  56.  
  57. img.icon{
  58.     display: block;
  59.     margin:30px auto;
  60.     background-color: rgba(255,255,255,.15);
  61.     width:40px;
  62.     padding:20px;
  63.     -webkit-border-radius: 50%;
  64.     -webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);
  65.     -webkit-transition:box-shadow .4s;
  66. }
  67.  
  68. p.texto{
  69.     font-size: 3;
  70.     color:white;
  71.     text-align: center;
  72.     padding-top:0px;
  73.     opacity: .9;
  74.     -webkit-transition: padding-top .4s;
  75.     font-family: arial;
  76. }
  77.  
  78. p.historia{
  79.     font-size: 3;
  80.     color:white;
  81.     text-align: justify;
  82.     padding-top:0px;
  83.     opacity: .9;
  84.     -webkit-transition: padding-top .4s;
  85.     font-family: verdana;
  86.  
  87. }
  88.  
  89.  
  90. div.contenedor:hover{
  91.     height:200px;
  92. }
  93.  
  94. div.contenedor:hover p.texto{
  95.     padding-top: 30px;
  96.     opacity: 1;
  97. }
  98.  
  99. div.contenedor:hover img.icon{
  100.     -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,.6);
  101. }
Última edición por webosiris; 08/09/2014 a las 22:30