상대 div를 중심에 배치하는 방법?

Question

나는 다음과 같은 코드를 성공하지 않고 몇 시간 동안 작동 시키려고 노력해 왔습니다. 프로젝트가 중앙에 오도록 도와 주시겠습니까? (페이지가 확대/축소 될 때에도)? 여기

내 HTML & CSS입니다 :

#bottom { 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t left: 0; 
 
\t right: 0; 
 
\t background-color: #FFF;} 
 
\t 
 
#secondsection { 
 
\t background-size: 100% auto; 
 
\t background-size: cover; 
 
\t color: #eaeaf0; 
 
\t margin-left: 7%; 
 
\t margin-right: 7%; 
 
\t padding-top: 35px; 
 
\t padding-bottom: 35px; 
 
\t position: relative;} 
 

 
#ss_top { 
 
\t width: 100%; 
 
\t height: 100%;} 
 

 
.ss_title { 
 
\t display: inline; 
 
\t float:left; 
 
\t color: #000000; 
 
\t font-family: 'Eurostile'; 
 
\t font-size: 35px; 
 
\t text-transform: uppercase;} 
 

 
.ss_title2 { 
 
\t color: #a5a5a5;} 
 

 
#gallerybutton { 
 
\t position: relative; 
 
\t display: inline; 
 
\t float: right; 
 
\t margin-right: 0%; 
 
    margin-top: 50px; 
 
    padding: 20px; 
 
    background-color: #000; 
 
    text-decoration: none; 
 
    border: none; 
 
    color: #FFF; 
 
    text-transform: uppercase;} 
 

 
#projects { 
 
\t position: relative; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t max-width: 2000px; 
 
\t padding: 175px 0px 0px 0px;} 
 

 
#pr_one, #pr_two { 
 
\t display: block;} 
 

 
.pr_img { 
 
\t float: left; 
 
\t display: inline; 
 
\t margin-right: 1%; 
 
\t margin-bottom: 1%;} 
 

 
#viewprofilebutton { 
 
\t position: relative; 
 
    left: -75px; 
 
    margin-left: 50%; 
 
    margin-top: 3.5%; 
 
    margin-bottom: 2.5%; 
 
    padding: 20px; 
 
    background-color: #000; 
 
    text-decoration: none; 
 
    border: none; 
 
    color: #FFF; 
 
    text-transform: uppercase;}

<div id="secondsection"> 
 
\t \t \t \t \t 
 
\t <div id="ss_top"> 
 
\t \t <p class="ss_title">A selection of projects<br /><span class="ss_title2">I've worked on lately</span></p> 
 
\t \t \t <button type="button" id="gallerybutton">See everything</button> 
 
\t </div> 
 

 
\t <div id="projects"> 
 
\t <div id="pr_one"> 
 
\t \t <div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div> 
 
    \t <div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div> 
 
     <div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div> 
 
\t </div> 
 
\t <div id="pr_two"> 
 
\t \t <div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div> 
 
\t \t <div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div> 
 
     \t <div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div> 
 
\t </div> 
 
\t </div> 
 

 
\t <a href="#thirdsection"><button type="button" id="viewprofilebutton">See my work</button></a> 
 

 
</div>

Answer 1

은 시작이다. 다음 CSS 봐 :

#bottom { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    background-color: #FFF;} 

#secondsection { 
    background-size: 100% auto; 
    background-size: cover; 
    color: #eaeaf0; 
    margin-left: 7%; 
    margin-right: 7%; 
    padding-top: 35px; 
    padding-bottom: 35px; 
    position: relative; 
    border: 1px dotted red; 
} 

#ss_top { 
    width: 100%; 
    height: 100%; 
    border: 1px dotted blue; 
    overflow: auto; 
} 
#ss_top p { 
    margin: 0; 
} 

.ss_title { 
    display: inline-block; 
    color: #000000; 
    font-family: 'Eurostile'; 
    font-size: 35px; 
    text-transform: uppercase;} 

.ss_title2 { 
    color: #a5a5a5;} 

#gallerybutton { 
    position: relative; 
    display: inline; 
    float: right; 
    margin-right: 0%; 
    margin-top: 50px; 
    padding: 20px; 
    background-color: #000; 
    text-decoration: none; 
    border: none; 
    color: #FFF; 
    text-transform: uppercase;} 

#projects { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 2000px; 
    padding: 175px 0px 0px 0px; 
    border: 1px dashed blue; 
} 

#pr_one, #pr_two { 
    display: block; 
    border: 2px dashed blue; 
    overflow: auto; 
    text-align: center; 
} 

.pr_img { 
    display: inline-block; 
    width: 30%; 
    margin-right: 1%; 
    margin-bottom: 1%; 
} 
.pr_img img { 
    display: inline-block; 
    width: 100%; 
    height: auto; 
} 

#viewprofilebutton { 
    position: relative; 
    left: -75px; 
    margin-left: 50%; 
    margin-top: 3.5%; 
    margin-bottom: 2.5%; 
    padding: 20px; 
    background-color: #000; 
    text-decoration: none; 
    border: none; 
    color: #FFF; 
    text-transform: uppercase;} 

내가 제목, #ss_top에서 수레를 제거하기 시작, 당신은 필요하지 않습니다.

이미지가있는 패널 #projects의 경우, 수레는 센터링으로 문제를 일으키고 있습니다.

#pr_one 및 #pr_two에

, text-align: center을 추가 한 다음 이미지 정렬 .pr_img에 display: inline-block을이 센터 것 사용 (줄을/약간의 마진을), 그래서 이미지 자동 규모가를 형성하는 것을 다음 30% 말의 적절한 폭을 적용 3의 행.

트릭은 이미지 (.pr_img img)에 display: inline-block을 적용하여 에서 여백을 사용하여 위쪽/아래쪽/왼쪽/오른쪽 간격을 제어 할 수 있습니다.

참조 데모에서 : http://jsfiddle.net/audetwebdesign/rmtpy6t0/

참고 : 당신은 여전히이해야 할 최대 연마 그러나 적어도이 중심과 떠 요소와 관련된 문제를 명확히해야합니다.

반응 형 디자인 : 화면 크기에 따라 2 개 또는 3 개의 이미지를 연속으로 표시하려면 미디어 쿼리에 대해 알아야합니다. 그러나 div에 3 개의 이미지를 래핑했기 때문에 행당 3 개로 잠겨 있지만 괜찮을 수 있습니다.

Answer 2

당신이 당신의 사진을 중심으로하여 CSS의 변화를 확인하려면 :

.pr_img { 
    /* float: left; */ 
    display: block; 
    /* margin-right: 1%; */ 
    /* margin-bottom: 1%; */ 
    margin: 0 auto; 
} 

Answer 3

.pr_img { 
    display: block; 
    margin: 0 auto; 
} 

말해을 작동한다면

편집 : 예.

작품 :) 대신 마진 왼쪽을 사용 http://jsfiddle.net/max7j84m/

Answer 4

: 자동차와 마진 오른쪽 : 자동 마진을 추가 : 자동 여기

#projects { 
    position: relative; 
    margin:auto; 
    max-width: 2000px; 
    padding: 175px 0px 0px 0px; 
    } 

Answer 5

.pr_img { 
    text-align: center; 
    left: 0; 
    right: 0; 
    display: block; 
    margin: 0 auto; 
} 

그것은 나를 위해 일이다