Question

I have many absolute position div , how can i change it align to center when orientation change to center?

lets say

<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>

I tried margin: 0 auto and it conflicted with the absolute also.

the reason to have the positioning as absolute because there will be animation of the div and many div will stack on a place

Answer 1

You need to get rid of the positioning and setup the widths and margins for each orientiation to make this work..

This is based on the

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

and

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

CSS methods.

I have set up an example for you here.

To see it live either copy the url from this jsbin page and view it in the iPhone emulator or view it in a real mobile browser.