Question

我有很多绝对位置div，当方向变为中心时，如何将其更改为居中？

让我们说

<div style="position:absolute; top:0px;left:0px">
  <div style="position:absolute; top:0px;left:11px">asd</div>
  <div style="position:absolute; top:0px;left:15px">asd</div>
</div>

我试过保证金：0自动，它也与绝对冲突。

将定位设为绝对的原因是因为会有div的动画而且很多div会叠加在一个地方

Answer 1

你需要摆脱定位并设置每个orientiation的宽度和边距，以使其工作..

这是基于

 /* Portrait */
@media screen and (max-width: 320px)

和

/* Landscape */
@media screen and (min-width: 321px)
{

CSS方法。

我已经设置了example for you here。

要查看它，请复制此jsbin page中的网址并在iPhone emulator中查看该网址，或在真实的移动浏览器中查看该网址。

Answer 2

我想我已经通过

解决了这个问题

<div style="position:relative; margin: 0px auto;">
  <div style="position:absolute; top:0px;left:11px">asd</div>
  <div style="position:absolute; top:0px;left:15px">asd</div>
</div>

因为将父母设置为相对顶部：0左：子div的0将位于父div的左上角

此定位的更详细说明位于http://www.barelyfitz.com/screencast/html-training/css/positioning/

Answer 3

这么简单

.[you-class-name]{
 ......
 Other element for design the div
 .........................
 left: 50%; //Most Import to align center of screen, tested in all browser
}

如何在方向改变时将多个绝对位置div更改为移动屏幕的中心？

3 个答案: