[英]How do i vertically center align div with dynamic multiple line text
Below is the CSS i am using: 以下是我正在使用的CSS:
.flip-container
{
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 150px;
height: 150px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
display: table-cell;
vertical-align:middle;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
text-align: center;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(logo.png) 0 0 no-repeat;
}
.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
}
The HTML that i am using looks like this : 我使用的HTML看起来像这样:
<div id="article"><div class="flip-container" ontouchstart="this.classList.toggle('.'hover'.');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
<img src="" width="160" height="160" /> </div>
</div>
</div>
</div>
The CSS of the article class is: 文章类的CSS是:
#article {
margin: 5px;
float: left;
height: 150px;
width: 150px;}
I am unable to make the fext in the FRONT div center vertically centered. 我无法使FRONT div中心的fext垂直居中。 Also it would be dynamic and multiline.
它也是动态和多线的。 Any Ideas?
有任何想法吗?
I tried using 'vertical-align:middle' along with 'display:table-cell' but that didn't help or maybe i just applied them to the wrong CSS Blocks. 我尝试使用'vertical-align:middle'和'display:table-cell',但这没有帮助,或者我只是将它们应用于错误的CSS块。
You can use display: table
for your parent container and display: table-cell
for your child container: 您可以对父容器使用
display: table
并display: table-cell
子容器的display: table-cell
:
#article {
display:table;
height: 150px;
width: 150px;
float: left;
text-align: center;
}
.front {
display: table-cell;
vertical-align:middle;
}
Fiddle Demo: http://jsfiddle.net/uVSN6/1/ 小提琴演示: http : //jsfiddle.net/uVSN6/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.