0

estoy creando una tarjeta de invitacion super basica. Con un Flip hecho con bootstrap, estan los links de los cdn, funciona todo perfecto, pero mi problema es que no puedo centrar el contenido del div con la clase "flip-card"

Creo que que le estoy dando alguna caracteristica que me fija la posicion y no me deja centrarlo y no puedo darme cuenta que es, deje comentado en el archivo CSS dentro del "body" y "flip-card" los parametros que intente usar para centrarlo y no me funcionaron. Desde ya muchas gracias por ver el codigo y darme una ayuda!

body {
  font-family: Arial, Helvetica, sans-serif;
  /* align-items: center;
  justify-content: center; */
  /* align-self: center; */

}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  /* justify-content: center;
  align-items: center; */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Party Invitation</title>

    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body class="text-center">
    <h1>Nos Casamos!</h1>
    <h3>Te invitamos a nuestra fiesta</h3>
    <br>
    <h4 >Haz Click en la foto!</h4>

      <div class="flip-card ">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img
            src="/images/Manu&Juli.JPG"
            alt="Avatar"
            style="width: 300px; height: 500px"
            />
          </div>
          <div class="flip-card-back" style="width: 300px; height: 600px">
            <img
            src="/images/Manu-ju-oli.JPG"
            alt="back Avatar"
            style="width: 300px; height: 500px"
            />
            <button>
              <a href="https://g.page/casaperezmultiespacio?share">Ubicacion</a>
            </button>
          </div>
        </div>
      </div>
      
    
      
      
      <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
      crossorigin="anonymous"
    ></script>

  </body>
</html>

1 respuesta 1

0

Agrega la propiedad: margin: 0 auto a la clase .flip-card

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  margin: 0 auto;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  /* align-items: center;
  justify-content: center; */
  /* align-self: center; */

}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  margin: 0 auto;
  /* justify-content: center;
  align-items: center; */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Party Invitation</title>

    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body class="text-center">
    <h1>Nos Casamos!</h1>
    <h3>Te invitamos a nuestra fiesta</h3>
    <br>
    <h4 >Haz Click en la foto!</h4>

      <div class="flip-card ">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img
            src="/images/Manu&Juli.JPG"
            alt="Avatar"
            style="width: 300px; height: 500px"
            />
          </div>
          <div class="flip-card-back" style="width: 300px; height: 600px">
            <img
            src="/images/Manu-ju-oli.JPG"
            alt="back Avatar"
            style="width: 300px; height: 500px"
            />
            <button>
              <a href="https://g.page/casaperezmultiespacio?share">Ubicacion</a>
            </button>
          </div>
        </div>
      </div>
      
    
      
      
      <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
      crossorigin="anonymous"
    ></script>

  </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.