此处可重现jsfiddler code
我有以下
$(window).resize(function () {
$('.buttonWrapper').css({
position: 'absolute',
left: ($(window).width() - $('.buttonWrapper').outerWidth()) / 2,
top: ($(window).height() - $('.buttonWrapper').outerHeight()) / 2
});
});
// To initially run the function:
$(document).ready($(window).resize);
HTML
<div class="background">
<div class="buttonWrapper">
<div class="inlineWrapper">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
<div class="back">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
</div>
</div>
</div>
<div class="inlineWrapper">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
<div class="back">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
</div>
</div>
</div>
<div class="inlineWrapper">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
<div class="back">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
</div>
</div>
</div>
</div>
</div>
CSS
body {
background: rgb(150, 150, 150) url(/Content/Images/LargeLogo.png) no-repeat center center fixed;
-webkit-background-size: 80%; /* For WebKit*/
-moz-background-size: 80%; /* Mozilla*/
-o-background-size: 80%; /* Opera*/
background-size: 80%; /* Generic*/
z-index: -1;
}
.buttonWrapper {
z-index: 1;
}
@font-face {
font-family: "HemiHead";
src: url("../../fonts/hemi_head_bd_it.otf");
src: local("hemi_head_bd_it"),
url("../../fonts/hemi_head_bd_it.otf") format("opentype"),
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.flipper img {
max-height: 200px;
max-width: 200px;
vertical-align: middle;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
.inlineWrapper {
float: left;
padding: 5px;
}
班级中包含的项目从左上角开始。
在第一次调整大小后,他们最终离开了中心。
第二次调整大小后,他们最终终止了中心,这是我希望他们居住的地方。
如何在不必手动调整窗口大小的情况下最初启动中心,以便最终以中心为中心。
答案 0 :(得分:1)
尝试在$(document).ready();
答案 1 :(得分:1)
触发页面加载时调整大小
进行更改
$(document).ready($(window).resize);
到
$(document).ready(function(){
$(window).resize();
});
默认情况下,按钮包装宽度设置为窗口宽度添加float:left
到buttonwrapper类以获得实际容器宽度
更新小提琴http://jsfiddle.net/zyaev79m/4/