Question

我正在为客户开发一个项目，并在我的Android设备上测试网站时遇到了问题。基本上，我只想把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则不会。

我尝试使用左：50％定位，负边距等于元素宽度的一半，但这似乎也不起作用。

无论如何，我基本上一直在使用代码并在Chrome v21和Android中测试过去2天试图找出问题所在......并且正如您在示例中看到的那样，我已经剥离了没有任何运气，最简单的元素。任何人都知道如何让Android水平居中工作？

Answer 1

如果您移除绝对位置，左侧位置，顶部位置和顶部位置正确的代码你应该没问题。

DIV应该只需要保证金：0自动以便居中。

Answer 2

我建议不要在这个例子中使用绝对值而是使用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>

＆GT;

Answer 3

好的，使用

后居中工作

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

此处的1200px宽度是我在页面上使用的大图像叠加层的宽度，这也适用于页面上最宽的对象。看起来移动浏览器采用屏幕上最宽元素的宽度，并对其进行缩放以使此宽度等于屏幕宽度。然后它完成剩下的渲染。如果屏幕在此之后重新调整大小，显然它不会重新定位事物吗？

好的，所以我不确定为什么会有效...就是这样。希望它可以帮助遇到同样问题的其他人。

将包装器DIV居中放置在Android中不起作用

3 个答案: