2

クライアント向けのプロジェクトに取り組んでおり、Android デバイスで Web サイトをテストしているときに問題が発生しました。基本的に、ほとんどの本文コンテンツをラップする DIV を中央に配置したいだけです。

<img src="images/lightingOverlay.png" style="z-index: 1000; position: absolute; left: 0; right: 0; margin: 0 auto; top: 0;" />
<div style="border: solid 5px black; height: 50px; width: 978px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 100px;" >
  wrapped content!
</div>

今のところインラインスタイルを使用しました。div と画像は同じコードを使用していますが、デフォルトの Android ブラウザーで表示すると、画像は中央に配置され、DIV は中央に配置されません。

私は left: 50% の配置を要素幅の半分に等しい負のマージンで試しましたが、それもうまくいかないようです。

とにかく、私は基本的にコードをいじって、過去 2 日間、Chrome v21 と Android でテストして、何が問題なのかを突き止めました...そして例でわかるように、私は運のない最も単純な要素。Androidで水平センタリングを機能させる方法を知っている人はいますか?

4

3 に答える 3

0

使用後、センタリングが機能するようになりました

style="width: 1200px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 0;"

ここでの 1200px の幅は、ページで使用している大きな画像オーバーレイの幅であり、ページで最も幅の広いオブジェクトにも発生します。モバイルブラウザは、画面上で最も広い要素の幅を取り、この幅が画面の幅と等しくなるように拡大縮小するようです。次に、残りのレンダリングを行います。その後、画面のサイズが変更された場合、どうやら再配置する必要はありませんか?

わかりましたので、なぜこれが機能したのかわかりません...ただ、機能しただけです。うまくいけば、同じ問題に遭遇した他の誰かを助けることができます.

于 2012-08-15T17:27:26.223 に答える
0

コードの絶対位置、左、上、右のビットを削除すると、問題ありません。

DIV を中央に配置するには、margin:0 auto のみが必要です。

于 2012-08-03T08:23:58.490 に答える
0

この場合は絶対を使用せず、margin-left:auto; を使用することをお勧めします。そしてmargin-right:auto;

<div style="border:solid 5px black; height:50px; width:978px; margin-left:auto; margin-right:auto; margin-top:100px;" >
  wrapped content!
</div>

編集：

この実装を試すこともできます

<div style="width:100%; text-align:center;">
  <div style="border:solid 5px black; height:50px; width:978px; margin-top:100px;" >
    wrapped content!
  </div>
</div>

>

于 2012-08-03T08:24:58.803 に答える