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>