网站粘在手机的左上角(android)

时间:2013-09-27 14:49:39

标签: android html css mobile centering

我一直在努力尝试将移动网站(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

enter image description here

顺便说一句,我试过的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

有什么想法吗?

&GT;&GT;&GT;&GT;&GT;更新1 - @Moob建议&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; &LT;

#wrapper {
    z-index: 1;
    position: absolute;
    width: 1370px; height: 910px;
    top: 0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

仍然是顶部,但不是左侧。没有居中。

enter image description here

1 个答案:

答案 0 :(得分:0)

<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;
}

Demo of centred div

...但我怀疑手机的分辨率低于#wrapper

的尺寸