我一直在痛苦地尝试在移动设备 (Andropid OS ICS 4.2.2) 中将网站居中对齐,但它仍然卡在屏幕的左上角,略微被剪裁。 我只尝试过 jQuery 和 CSS ...相同的结果。在台式电脑上工作正常。
这就是我现在拥有的 - HTML:
<body>
<div id="wrapper">
...
</div>
</body>
CSS:
body {
overflow: hidden;
}
#wrapper {
z-index: 1;
width: 1370px; height: 910px;
position: absolute;
top: 50%;
margin-top: -455px; /* half of #wrapper height */
left: 50%;
margin-left: -685px; /* half of #wrapper width */
}
在线结果:link
顺便说一句,我试过的 jQuery 是这样的:
$(window).resize(function(){
$('#wrapper').css({
left: ($(window).width() - $('#wrapper').outerWidth())/2,
top: ($(window).height() - $('#wrapper').outerHeight())/2
});
});
$(window).resize(); // To initially run the function
有什么想法吗?
>>>>> 更新 1 - @Moob 建议 <<<<<<<<<<<<<<<<<<<<<
#wrapper {
z-index: 1;
position: absolute;
width: 1370px; height: 910px;
top: 0;
right:0;
bottom:0;
left:0;
margin:auto;
}
仍然裁剪顶部,但不裁剪左侧。不居中。
最佳答案
<罢工> <div id="wrapper">...
不能用 </wrapper>
关闭.您必须关闭 </div>
罢工>
您可以尝试像这样将元素居中:
#wrapper {
z-index: 1;
position: absolute;
width: 1370px; height: 910px;
top: 0;
right:0;
bottom:0;
left:0;
margin:auto;
}
...但我怀疑手机的分辨率小于您的 #wrapper
的尺寸
关于android - 网站卡在移动设备(android)的左上角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19053742/