Как изменить многие абсолютные позиции div в центр экрана мобильного телефона при изменении ориентации? - PullRequest
Новая
       2

Как изменить многие абсолютные позиции div в центр экрана мобильного телефона при изменении ориентации?

3 голосов
/ 21 февраля 2011

У меня есть много абсолютных положений 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 auto, и оно также противоречило абсолютному.

причина, по которой позиционирование является абсолютным, потому что будет анимация div, и многие div будут складываться на месте

Ответы [ 3 ]

3 голосов
/ 21 февраля 2011

Вам нужно избавиться от позиционирования и настроить ширину и поля для каждой ориентации, чтобы сделать эту работу ..

Это основано на 

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

и 

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

методы CSS.

Я настроил для вас пример .

Чтобы увидеть его вживую, скопируйте URL-адрес с этой jsbin-страницы и просмотрите его в эмуляторе iPhone или просмотрите его в реальном мобильном браузере.

0 голосов
/ 19 апреля 2011

Так просто 

.[you-class-name]{
 ......
 Other element for design the div
 .........................
 left: 50%; //Most Import to align center of screen, tested in all browser
}
0 голосов
/ 21 февраля 2011

Я думаю, что я должен решить это с помощью 

<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 left: 0 дочернего div будет в верхнем левом углу родительского div

более подробное объяснение этого позиционирования находится на http://www.barelyfitz.com/screencast/html-training/css/positioning/

...