0

モバイル (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 */
}

オンライン結果:リンク

ここに画像の説明を入力

ちなみに試した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;
}

上部はトリミングされますが、左側はトリミングされません。中心にありません。

ここに画像の説明を入力

4

1 に答える 1