부모가 상대 위치로 이동하는 절대 div div

Question

위치 : 절대 인 상위 div가 있습니다. 내부의 컨테이너는 수직 가운데에 텍스트가 있습니다. 이것은 부모 div의 전체 너비에 걸쳐 있습니다.

그러나 부모 div의 50 %로 설정된 수직 가운데 맞춤 텍스트 주위에 컨테이너 div를 배치하면이 값을 무시하고 상위 상위 div에 100 % 계속됩니다.

새로운 컨테이너를 상대 위치로 설정하려고 시도했지만 이는 사라지게 만듭니다. div .quote-center의 너비를 50 %로 변경하면 올바른 너비를 얻는 것처럼 보이지만 레이아웃이 응답 할 때마다 내가 원하는대로 각 상자를 조작 할 수 없으므로 적절하지 않습니다.

http://codepen.io/anon/pen/gbGZOL

.brick { 
 
    position: absolute; 
 
} 
 
.size42-insta { 
 
    width: 640px; 
 
    height: 320px; 
 
} 
 
.red { 
 
    background-color: #da4a44; 
 
} 
 
.instagram {} .instagram-image { 
 
    width: 50%; 
 
} 
 
img { 
 
    width: 100%; 
 
} 
 
.instagram-quote { 
 
    width: 50%; 
 
} 
 
.quote-content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    overflow: hidden; 
 
    z-index: 100; 
 
} 
 
.quote-center { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.quote-vcenter { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
} 
 
.quote { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    font-family: "omnes-pro", sans-serif; 
 
    font-style: italic; 
 
    font-weight: 800; 
 
    font-size: 1.6em; 
 
}

<div class="brick size42-insta red"> 
 
    <div class="instagram"> 
 
    <div class="instagram-image"> 
 
     <img src="http://i.imgur.com/87F6Nvc.png" /> 
 
    </div> 
 
    <div class="instagram-quote"> 
 
     <div class="quote-content"> 
 
     <div class="quote-center"> 
 
      <span class="quote-vcenter"> 
 
       <div class="social-title">INSTAGRAM</div> 
 
       <div class="twitter-tweet">“Sed bibendum malesuada sapien, vestibulum porta tortor ultrices" 
 
       </div> 
 
       <div class="twitter-date">19 hours ago 
 
       </div> 
 
       <div class="icon-stream twitter-stream"><a href="http://twitter.com/">a</a></div> 
 
       </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

내가 단순화 것이며, 구조 조정 열이 완전히,하지만 당신은 지금 (귀하의 질문에 코멘트에 설명)이 문제를 해결하기 위해, 당신은 변경해야 위치가 .quote-content이고 너비 값을 추가하십시오.

.quote-content { 
    right:0; 
    width:100%; 
} 

left:0도 삭제해야합니다. 그래서 스타일은 다음과 같습니다

.quote-content { 
    position:absolute; 
    top:0; 
    right:0; 
    width:50%; 
    overflow:hidden; 
    z-index:100; 
} 

편집 :

수직으로, 당신은 자동 마진을 사용할 수 있습니다 (당신이 지금 무엇을 사용) 절대 위치 DIV를 정렬하려면, 같은 당신이 오른쪽, 위쪽을 정의로, 뿐만 아니라 아래쪽 및 왼쪽 값 :

.quote-content { 
    position:absolute; 
    top:0; 
    right:0; 
    left:0; 
    margin:auto 0 auto auto; 
    width:50%; 
    overflow:hidden; 
    z-index:100; 
    bottom:0; 
} 

JSFiddle

JSfiddle code

Answer 2

켜기 .quote-content 너비 50 %를 추가하고 왼쪽을 제거합니다. 0; 너비를 작게하려면 오른쪽에 추가해야합니다 : 0; 너비 40 % 너비로 만들려면 오른쪽에 5 %를 더 넣어야합니다.

40 % + 5 % 오른쪽은 45 %이며 나머지 50 %는 다시 5 %가됩니다.

.quote-content{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 5%; 
    overflow: hidden; 
    z-index: 100; 
    width: 40%; 
} 

http://codepen.io/anon/pen/GgMPqr