centrado de varios div con efecto flip

fersosa · #1 (**permalink**) 22/06/2015, 14:24

Hola dejo un codepen donde no puedo centrar los cuadros del medio.
espero me ayuden, muchas gracias!
http://codepen.io/FernandoSosa/pen/MwOWXR

pzin · #2 (**permalink**) 22/06/2015, 15:04

Pon también el código en el foro por favor.

fersosa · #3 (**permalink**) 22/06/2015, 15:51

Si claro!

Código HTML:

Ver original<div id="resenas">
   
 
 
 
 
 
 
<div id="resenasflipper">
<div class="BoxTitular">
  <span>Reseña del libro Descendencia</span>
</div>
<div class="cuadrosflip">
<!-- RESEÑA BRECHA -->
<div class="flip">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
     
    <!-- Front -->  
    <div class="front">
       <p id="textocentrado">Reseña Brecha</p> 
    </div>
     
    <!-- BACK -->  
    <div class="back">
       <a href="#" onclick=window.open("../horacio/resenadescendenciabrecha.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
    </div>
     
  </div>
</div>
</div>
 
 
 
 
<!-- RESEÑA EL CULTURAL -->
<div class="flip">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
     
    <!-- Front -->  
    <div class="front">
       <p id="textocentrado">Reseña El Cultural</p> 
    </div>
     
    <!-- BACK -->  
    <div class="back">
       <a href="#" onclick=window.open("../horacio/resenadescendenciaelcultural.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
    </div>
     
  </div>
</div>
</div>
 
 
 
 
 
 
 
 
<!-- RESEÑA LA DIARIA -->
<div class="flip">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
     
    <!-- Front -->  
    <div class="front">
       <p id="textocentrado">Reseña La Diaria</p> 
    </div>
     
    <!-- BACK -->  
    <div class="back">
       <a href="#" onclick=window.open("../horacio/resenadescendencialadiaria.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
    </div>
     
  </div>
</div>
</div>
 
</div>
  
  
 
 
 
 
 
 
 
 
 
 
 
<div class="BoxTitular" id="separador">
  <span>Reseñas del libro El revés asombrado de la ocarina</span>
</div>
 
 
 
 
 
 
<!-- RESEÑA EL CULTURAL -->
<div class="flip">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
     
    <!-- Front -->  
    <div class="front">
       <p id="textocentrado">Reseña El cultural</p> 
    </div>
     
    <!-- BACK -->  
    <div class="back">
       <a href="#" onclick=window.open("../horacio/elreveselcultural.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
    </div>
     
  </div>
</div>
</div>
 
 
 
 
 
 
 
 
<!-- RESEÑA BRECHA -->
<div class="flip">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
     
    <!-- Front -->  
    <div class="front">
       <p id="textocentrado">Reseña Brecha</p> 
    </div>
     
    <!-- BACK -->  
    <div class="back">
       <a href="#" onclick=window.open("../horacio/resenaelrevesasombradobrecha.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
    </div>
     
  </div>
</div>
</div>
 
 
 
 
 
 
 
 
 
 
 
 
<div class="BoxTitular" id="separador">
  <span>Reseñas del libro El Silencio de los pájaros</span>
</div>
 
 
<!-- RESEÑA BRECHA -->
<div class="flip">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
     
    <!-- Front -->  
    <div class="front">
       <p id="textocentrado">Reseña Brecha</p> 
    </div>
     
    <!-- BACK -->  
    <div class="back">
       <a href="#" onclick=window.open("../horacio/resenaelsilenciobrecha.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
    </div>
     
  </div>
</div>
</div>
 
 
 
 
 
 
 
 
 
 
<!-- RESEÑA BÚSQUEDA -->
<div class="flip">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
     
    <!-- Front -->  
    <div class="front">
       <p id="textocentrado">Reseña Búsqueda</p> 
    </div>
     
    <!-- BACK -->  
    <div class="back">
       <a href="#" onclick=window.open("../horacio/resenaelsilenciobusqueda.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
    </div>
     
  </div>
</div>
</div>
 
 
 
 
 
 
        
 
 
   
   
   
 
<!-- RESEÑA SOCIO ESPECTACULAR -->
<div class="flip">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
     
    <!-- Front -->  
    <div class="front">
       <p id="textocentrado">Reseña Socio Espectacular</p> 
    </div>
     
    <!-- BACK -->  
    <div class="back">
       <a href="#" onclick=window.open("../horacio/resenaelsilenciosocioespectacular.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
    </div>
     
  </div>
</div>
</div>
  
 
 
   
   
   
   
   
   
   
 
<!-- RESEÑA LA DIARIA -->
<div class="flip">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
     
    <!-- Front -->  
    <div class="front">
       <p id="textocentrado">Reseña La Diaria</p> 
    </div>
     
    <!-- BACK -->  
    <div class="back">
       <a href="#" onclick=window.open("../horacio/resenaelsilencioladiaria.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
    </div>
     
  </div>
</div>
</div>   
   
   
   
   
   
 
   
   
   
   
        
        
        
<div class="BoxTitular" id="separador">
  <span>Reseñas del libro Oso de Trapo</span>
</div>        
        
 
 
<!-- RESEÑA DOSSIER -->
<div class="flip">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
     
    <!-- Front -->  
    <div class="front">
       <p id="textocentrado">Reseña Dossier</p> 
    </div>
     
    <!-- BACK -->  
    <div class="back">
       <a href="#" onclick=window.open("../horacio/resenaosodetrapodossier.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
    </div>
     
  </div>
</div>
</div>   
 
 
  
     
   
   
 
<!-- RESEÑA EL CULTURAL -->
<div class="flip">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
     
    <!-- Front -->  
    <div class="front">
       <p id="textocentrado">Reseña El Cultural</p> 
    </div>
     
    <!-- BACK -->  
    <div class="back">
       <a href="#" onclick=window.open("../horacio/resenaosodetrapoelcultural.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
    </div>
     
  </div>
</div>
</div>   
 
 
 
 
 
 
 
 
 
 
  
<div class="BoxTitular" id="separador">
  <span>Reseñas del libro Fabril</span>
</div>    
  
 
 
<!-- RESEÑA LA DIARIA -->
<div class="flip">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
     
    <!-- Front -->  
    <div class="front">
       <p id="textocentrado">Reseña La Diaria</p> 
    </div>
     
    <!-- BACK -->  
    <div class="back">
       <a href="#" onclick=window.open("../horacio/resenafabrilladiaria.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
    </div>
     
  </div>
</div>
</div>   
 
 
 
 
 
  
   
  
 
     </div>
   </div>
   </fieldset>
  
 
 
 
    
    </div> 
</div>

Código CSS:

Ver original#resenasflipper {
      width:100%;
      height: 100%;
      margin: 0 auto;
      text-align: center;
}
.cuadrosflip {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      text-align: center;
}
/* Asignamos perspectiva a nuestro contenedor */
.flip-container {
  width:200px;
height:100px;
float:left;
 
max-width:500px;
text-align: center;  
  perspective: 1000;
  border: 1px solid #d9d9d9;
  /* Para Firefox - IE10+ debemos agregar propiedades extras */
  -moz-transform-style: preserve-3d;
  -moz-transform: perspective(1000px);
  -ms-transform-style: preserve-3d;
  -ms-transform: perspective(1000px);
}
 
.flip-container, .front, .back {
  width: 200px;
  height: 100px;
}
 
/* preserve-3d: Indicamos que todo elemento hijo del div flipper estara en un espacio 3D XYZ  */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
 
.front, .back {
  /* Backface: Nos permite ocultar la parte posterior de los elementos html */
  /* en este caso FRONT - BACK */
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}
 
/* FRONT: eje Y = 0   */
.front {
  transform: rotateY(0deg);
  background: #201F1F;
}
 
/* BACK: eje Y = -180, se mantendra oculto */
.back {
  transform: rotateY(-180deg);
  background: gray;
}.flip-container:hover .front {
  transform: rotateY(180deg);
}
.flip-container:hover .back {
  transform: rotateY(0deg);
}
/* Toggle - Moviles */
.flip-container.hover .front {
  transform: rotateY(180deg);
}
.flip-container.hover .back {
  transform: rotateY(0deg);
}  
#separador {
  margin: 0 auto;
  text-align: center;
  clear: both;
}

ArturoGallegos · #4 (**permalink**) 23/06/2015, 12:19

Los elementos que usan float no se pueden centrar, usa en su lugar display:inline-block

fersosa · #5 (**permalink**) 23/06/2015, 13:05

Entiendo lo que me explicas, pero al aplicarlo no queda bien.
Donde debería estar? los suplanté pero no se solucionó.
Gracias!

fersosa · #6 (**permalink**) 27/06/2015, 16:25

Entiendo lo que me explicas, pero al aplicarlo no queda bien.
Donde debería estar? los suplanté pero no se solucionó.
Gracias!

ArturoGallegos · #7 (**permalink**) 27/06/2015, 20:18

Como has de saber no somos adivinos, si no muestras el código no podemos saber como lo has dejado después de la modificación.

Porque dices que no queda bien? que error o defecto le ves?