위치와의 수직 정렬 : 절대

Question

이 적용된 <div> 내에서 텍스트를 가운데 정렬하려고합니다 (여러 줄을 포함 할 수도 있고 그렇지 않을 수도 있음).

<div class="item"> 
    <img src="test.jpg" /> 
    <div class="overlay"> 
     <a href="#">Some long content</a> 
    </div> 
</div> 

다음과 적용된 CSS를 (이 덜 버전이 있음을 유의하시기 바랍니다) :

는 다음과 같은 마크 업을 고려하시기 바랍니다

.item { 
    position: relative; 

    img { 
     position: relative; 
     z-index: 1; 
    } 

    .overlay { 
     position: absolute; 
     z-index: 2; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: rgba(0,0,0,.5); 
     text-align: center; 

     a { 
      color: #fff; 
     } 
    } 
} 

뿐만 아니라 수평 센터 정렬되고, .overlay 내의 텍스트를 가운데에 세로로 정렬하고 싶습니다. 나는 다음과 같은 추가 시도했다 :

.item { 
    display: table; 

    .overlay { 
     display: table-cell; 
     vertical-align: middle; 
    } 
} 

는 또한 inline-block 시도했지만 요소가 절대 위치 때문에 아무것도, 도움이되지 않습니다. 텍스트가 여러 줄에 걸쳐 있고 큰 줄 높이를 지정하면 레이아웃이 깨질 수 있으므로 보통 line-height 트릭을 사용할 수 없습니다.

누구든지이 문제를 해결하기 위해 (상대적으로) 크로스 브라우저 방식을 알고 있습니까? IE9 +, FF 및 Chrome에서 작동해야합니다. 가능한 경우 추가 마크 업 또는 'divitis'를 추가하지 않는 것이 좋습니다. 나는 내 문제를 보여주기 위해 함께 jsFiddle을 넣었습니다

(당신은 또한 일반적인 트릭이 잘 작동 볼 때 position = absolute!) :

jsFiddle Demo

Answer 1

사용 :before 같은 의사 요소 및 inline-block이 방법 :

.item .overlay:before { 
    content:" "; 
    display:inline-block; 
    vertical-align:middle; 
    height:100%; 
} 
.item .overlay a { 
    display:inline-block; 
    vertical-align:middle; 
    color: #fff; 
} 

확인이 Demo Fiddle

_{당신은 내가 마진 오른쪽}

Answer 2

그냥 절대 위치 지정된 요소는 "위치"컨테이너을 사용 HERE 그 인라인 블록 항목 사이의 공간을 처리해야하고, 내부의 실제 요소 용기를 넣을 수 있습니다, 그래서 같은 - http://jsfiddle.net/Ggbtt/4/

HTML :

<div class="item"> 
    <img src="http://placehold.it/350x150.jpg" /> 
    <div class="overlay"> 
     <div class="inner-container"> 
      <div class="inner-cell"> 
       <a href="#">Some long content</a> 
      </div> 
     </div> 
    </div> 
</div> 

CSS :

,363,210

.item { 
    position: relative; 
    width: 350px; 
    display: table; 
} 
    .item .overlay { 
     position: absolute; 
     z-index: 2; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: rgba(0,0,0,.5); 
     text-align: center; 
     width: 100%; 
     height:100%; 
     vertical-align: middle; 
    } 
     .inner-container{ 
      width: 100%; 
      height: 100%; 
      display:table; 
     } 
     .inner-cell { 
      display:table-cell; 
      vertical-align: middle; 
      text-align: center; 
     } 
      .item .overlay a { 
       color: #fff; 
      } 

Answer 3

절대 위치를 사용하는 경우는, 당신의 시간마다

.item .overlay{ 
    top:50%; 
    -webkit-transform:translateY(-50%); 
}