具有垂直对齐内容和动画状态的卡
具有垂直对齐内容和动画状态的卡
提问于 2016-01-18 19:10:50
什么是在卡内垂直对齐内容的最佳方式，同时仍然允许它们在悬停时显示不同的屏幕？
例如，如果我有卡片，每一张都有一个显示的正面和一个在悬停时褪色的背面：
<div class="items">
<div class="item">
<div class="front">
<i class="material-icons">build</i>
<span>Item 1</span>
</div>
<div class="back">hello there</div>
</div>
<div class="item">
<div class="front">
<i class="material-icons">build</i>
<span>Item 1</span>
</div>
<div class="back">hello there</div>
</div>
<div class="item">
<div class="front">
<i class="material-icons">build</i>
<span>Item 1</span>
</div>
<div class="back">hello there</div>
</div>
</div>然后使用这个css：
.item {
align-items: center;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
background-color: tomato;
margin: 0 auto 1rem auto;
width: 200px;
position: relative;
}
.item .material-icons {
display: block;
}
.back,
.front {
opacity: 0;
position: absolute;
text-align: center;
width: 100%;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.front {
opacity: 1;
}
.item:hover .front {
opacity: 0;
}
.item:hover .back {
opacity: 1;
}
.material-icons {
font-size: 5em !important;
}然而，在使用位置绝对，我的垂直对中不工作，我很确定这可能不是最好的方法！
您可以在这里看到一个半工作版本：http://jsfiddle.net/kmturley/8o29y7pd/26/
谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-01-18 19:31:27
您可以使用transform进行对中。它与绝对位置元素一起工作很好。你根本不需要柔韧性盒。
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
text-align: center;http://jsfiddle.net/1354hzqb/
Stack Overflow用户
发布于 2016-01-18 19:30:50
只需将top位置50%和transform: translate(0, -50%)添加到.back, .front类中即可。
@import url('https://fonts.googleapis.com/css?family=Material+Icons');
.item {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 200px;
background-color: tomato;
margin: 0 auto 1rem auto;
width: 200px;
position: relative;
}
.item .material-icons {
display: block;
}
.back,
.front {
opacity: 0;
position: absolute;
text-align: center;
width: 100%;
top: 50%;
transform: translate(0, -50%);
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.front {
opacity: 1;
}
.item:hover .front {
opacity: 0;
}
.item:hover .back {
opacity: 1;
}
.material-icons {
font-size: 5em !important;
}<div class="items">
<div class="item">
<div class="front">
<i class="material-icons">build</i>
<span>Item 1</span>
</div>
<div class="back">hello there</div>
</div>
<div class="item">
<div class="front">
<i class="material-icons">build</i>
<span>Item 1</span>
</div>
<div class="back">hello there</div>
</div>
<div class="item">
<div class="front">
<i class="material-icons">build</i>
<span>Item 1</span>
</div>
<div class="back">hello there</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34862268
复制相关文章
相似问题
腾讯云开发者
