2

我正在为客户开发一个项目，在我的 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 不会。

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

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

4

3 回答 3

0

如果您删除绝对位置，左侧，顶部和右侧的代码位，您应该没问题。

DIV 应该只需要 margin:0 auto 才能居中。

于 2012-08-03T08:23:58.490 回答
0

我建议不要在这种情况下使用 absolute 而是使用 margin-left: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 回答
0

好的，使用后居中现在可以工作了

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

这里的 1200px 宽度是我在页面上使用的大图像叠加层的宽度，这也发生在页面上最宽的对象上。似乎移动浏览器采用屏幕上最宽元素的宽度，并对其进行缩放，以使该宽度等于屏幕宽度。然后它会进行其余的渲染。如果在那之后重新调整屏幕大小，显然它不会打扰重新定位东西？

好的，所以我不确定为什么会这样……只是确实如此。希望它可以帮助遇到同样问题的其他人。

于 2012-08-15T17:27:26.223 回答