Полностью центрировать изображение и делить - PullRequest
Новая
       21

Полностью центрировать изображение и делить

0 голосов
/ 28 августа 2011

Как вы можете видеть здесь http://dekkro.no -ip.org /

У меня есть два деления, одно поверх другого. Я хотел бы, чтобы они были на 100% мертвой точкой. с верхним div, оставаясь в центре, а размер страницы изменяется. Они сосредоточены на мне, но для многих людей это не так.

Я пытался использовать поля и проценты, но все еще не идеально. Есть ли исправление для этого?

Я сейчас использую 

position:absolute; left:32%; top:24%;margin: auto;z-index:-1;

Спасибо!

Ответы [ 3 ]

2 голосов
/ 28 августа 2011

Если ширина и высота вашего div фиксированы, вы можете центрировать его, используя отрицательные поля.

Например, если у вас есть div 300x200, вы можете центрировать его следующим образом: 

div {
  position: absolute;
  width: 300px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
}
1 голос
/ 28 августа 2011

Просто быстро возиться с Firebug: 

<div class="my_img" 
     style="position: absolute; top:50%; width: 100%;">
    <img width="690" 
         height="425" 
         style=" margin: auto;z-index:-1; margin-top: -212px;"  
         src="http://dekkro.no-ip.org/images/testimage.png">
</div>
<div id="container" 
     style="position : absolute; 
                 top : 0; 
               width : 100%; 
         margin-left : auto; 
        margin-right : auto; 
              height : 600px; 
             z-index : 5;">

А если вам нужно, чтобы при прокрутке он находился по центру, сделайте первую строку: 

<div class="my_img" 
     style="position: fixed; top:50%; width: 100%;">
0 голосов
/ 28 августа 2011

В тот день, когда я сделал это, как описано здесь: http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Может быть, теперь есть более лучший, более современный способ, иначе вы могли бы использовать это ...

...