Как центрировать относительный div в моем случае?

Question

Мне нужно создать относительные divs с абсолютными div внутри.

Мне также нужен относительный div, центрированный на разное разрешение на рабочем столе и ipad.

У меня есть что-то вроде:

<div class='container wrapper'> 
     <a id='link1' href='#'><img src='img1.png'/></a> 
     <a id='link2' href='#'><img src='img2.png'/></a> 
     <a id='link3' href='#'><img src='img3.png'/></a> 
     <a id='link4' href='#'><img src='img4.png'/></a> 
     <a id='link5' href='#'><img src='img5.png'/></a> 
    </div> 


.wrapper{ 
    position: relative;  
    top:10%; 
    left:5%; 
    height: 800px; 
} 

#link1{ 
    position: absolute; 
    top: 250px; 
    left: 0; 
} 
#link2{ 
    position: absolute; 
    top: 0; 
    left: 350px; 
} 
#link3{ 
    position: absolute; 
    top: 280px; 
    left: 700px; 
} 
#link4{ 
    position: absolute; 
    top: 600px; 
    left: 580px; 
} 
#link5{ 
    position: absolute; 
    top: 580px; 
    left: 180px; 
} 

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

они подобны

 ---- 
    | | 
    | | --- 
     ---- | | 
       | | 
----   --- 
| | 
| |  --- 
----  | |  --- 
      | |  | | 
      ---  | | 
        --- 

Я не уверен, как увидеть CSS для моего .wrapper дел. Кто-нибудь может мне помочь? Благодарю.

Answer 1

Чтобы центрировать ваш .container, вы должны убедиться, что его родитель имеет установленную ширину. Это может быть ваш тег тела или div, который является контейнером.

Затем, вы можете дать вашему контейнеру ширину и запас авто, как так:

.container { 
    width:960px; 
    margin: 0 auto; 
} 

margin:0 auto; такой же, как:

margin-top:0; 
margin-right:auto; 
margin-bottom:0; 
margin-left:auto; 

Если ваш .container позиционируется абсолютно, вы можете центрирование чтобы убедиться, что у его родителя есть ширина, вы можете сделать что-то вроде этого:

.container { 
    width:960px; 
    position:absolute; 
    left:50%; 
    margin-left:-480px; //This is NEGATIVE HALF of the width of the div 
} 

стр. Несмотря на то, что это не документально, обычно .wrapper находится за пределами .container. они обычно не являются одним и тем же элементом.

p.p.s. Вам нужно будет использовать проценты для ваших абсолютных элементов, чтобы он правильно масштабировался на разных устройствах. Если у вас есть left:700px, то он ВСЕГДА будет 700 пикселей слева. Если это left:10%, тогда он будет масштабироваться до ширины его контейнера.

Answer 2

Я не уверен на 100%, если я понимаю, что вам нужно, но я попробую дать вам 2 ответа.

Первый и самый прямолинейный подход будет Настройки width:90% и text-align:center

.wrapper{ 
    position: relative;  
    top:10%; 
    left:5%; 
    height: 800px; 
    width:90%; 
} 

добавить text-align:center;, если вы хотите, чтобы внутренние элементы по центру;

Если вы знаете ширину div, хороший CSS-метод для центрирования любого div с абсолютным позиционированием состоит в том, чтобы установить слева на 50% и маржу на 1/2 от ширины div;

div { 
position:absolute; 
width:500px; 
left:50%; 
margin-left:-250px; 
} 

Надеюсь, это поможет!