在Rails 3.2应用程序中,我使用响应式,可翻转的CSS圈子显示用户头像。但由于父元素需要填充,因此头像不在圆圈中心。
我如何将这个圆圈居中?在可能的情况下,我宁愿保持这个语义标记为img标记,而不是div上的背景图像。
此外,这可以优化吗?我目前有很多嵌套的div!
代码如下,此处jsfiddle。
<div class='responsive-container'>
<div class='responsive-inner'>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flip-inner">
<div class="front">
<div class="circle">
<div class="circle-inner">
<%= image_tag @user.avatar %>
</div>
</div>
</div>
<div class="back">
<div class="circle">
<div class="circle-inner">
<%= @user.name %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.responsive-container{
position: relative;
width: 50%;
}
.responsive-container:before{
content: "";
display: block;
padding-top: 100%;
}
.responsive-inner{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.flip-container {
perspective: 1000;
-webkit-perspective: 1000; /* Safari and Chrome */
}
/* flip the pane when hovered */
.flip-container:hover .flip-inner, .flip-container.hover .flip-inner {
transform: rotateY(180deg);
-ms-transform:rotateY(180deg); /* IE 9 */
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
}
.flip-inner {
transition: 0.6s;
-webkit-transition: 0.6s; /* Safari */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
position: relative;
}
.front, .back {
backface-visibility: hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
-ms-transform:rotateY(180deg); /* IE 9 */
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
}
.circle {
width: 100%;
height: 0;
padding: 50% 0; //padding top & bottom must equal width
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
overflow: hidden;
border: 1px #000 solid;
}
.circle-inner {
display: table;
width:100%;
}
.circle-inner img {
height: auto;
width: 100%;
}
.circle-inner p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
答案 0 :(得分:0)
为什么不使用border-radius而不是circle?我认为会更容易。