如何在这个动画 div 中垂直对齐这个图像？
.flip-card {
background-color: transparent;
float: left;
height: auto;
max-height: 25%;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
overflow: hidden;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: transparent;
color: black;
}
.flip-card-back {
background-color: dodgerblue;
color: white;
font-size: 2vmin;
transform: rotateY(180deg);
}<div class="flip-card col-4">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://via.placeholder.com/468x60?text=40%%20Off" class="img-fluid img-discount" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<span style="font-weight: bold; font-size:3vmax; color: #fff">Text</span>
<p>Text</p>
<p>Text</p>
</div>
</div>
</div>最佳答案
您在 flip-card 类中提到了 float:left，删除该类中的 float:left 即可。
<!DOCTYPE html>
<html>
<head>
<style>
.flip-card {
background-color: transparent;
height: auto;
max-height: 25%;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: transparent;
color: black;
}
.flip-card-back {
background-color: dodgerblue;
color: white;
font-size: 2vmin;
transform: rotateY(180deg);
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
</head>
<body>
<div class="flip-card col-4">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid img-discount" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<span style="font-weight: bold; font-size:3vmax; color: #fff">Text</span>
<p>Text</p>
<p>Text</p>
</div>
</body>
</html>关于html - 如何垂直对齐此图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58258739/