내 경우에 상대 div를 센터링하는 방법은 무엇입니까?

Question

절대 div가 포함 된 상대 div를 만들어야합니다.

데스크톱 및 ipad에서 다른 해상도를 중심으로하는 상대 div가 필요합니다. 내 요소가 일정한 흐름을 다음되지 않기 때문에 나는 절대 위치를 사용할 필요가

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

:

내가 좋아하는 뭔가가있다.

그들은

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

처럼 내 .wrapper div에 대한 CSS를 참조하는 방법을 잘 모르겠습니다 있습니다. 누군가 나를 도울 수 있습니까? 감사.

Answer 1

귀하의 .container을 가운데 맞추려면 부모의 너비가 일정해야합니다. 이것은 귀하의 body tag 또는 컨테이너 인 div 일 수 있습니다. 당신의 .container이 절대적으로 배치 된 경우

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

, 당신이 중심에 있습니다 :

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

margin:0 auto;과 같이 동일합니다

그런 다음, 당신은 당신의 용기를 폭 등 같은 자동 마진을 제공 할 수 있습니다 부모가 너비를 가지고 있는지 확인하여 다음과 같이 할 수 있습니다.

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

p.s. 문서화 된 것은 아니지만 보통 .wrapper은 .container 외부입니다. 그들은 보통 같은 요소가 아닙니다.

p.p.s. 절대 요소에 대한 백분율을 사용해야하므로 다른 장치에서 올바르게 확장됩니다. left:700px이 있다면 왼쪽부터 항상 700px가됩니다. 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의 너비를 알고 있다면 절대 위치 지정을 사용하여 div를 가운데 정렬하는 멋진 CSS 방법은 왼쪽을 50 %로 설정하고 div의 너비의 1/2까지 여백을 설정하는 것입니다.

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

희망이 있습니다.