CSS에서 이미지의 세로 맞춤

Question

absolute div의 내용을 이미지에 세로로 정렬하려면 어떻게해야합니까?

http://jsfiddle.net/uxKpn/

Answer 1

당신은 절대 및 상대에 사업부에 배치 된 사진을 확인해야합니다. 상대 위치 요소는 항상 절대 절대 위치 요소의 왼쪽 상단 모서리에 위치합니다.

img 
{ 
    position:absolute; 
    width: 100%; 
} 

.article-comments 
{ 
    position:relative; 
} 

이미지에 div를 세로로 정렬 할 수 있습니다!

Answer 2

display: table-cell 및 vertical-align: middle;을 .picture-comments에서 사용하십시오.

Answer 3

이 작업을 수행해야합니다 :

FIDDLE

당신은 테이블로 .article-comments를 표시하고 내부 wraper이 table-cell로 표시하고 vertical-align:middle로 설정하기 위해 nedd.

이 솔루션은 당신을 alows 수직 정렬은 (예 : 사용자의 게시물에 코멘트)을 변경하는 경우에도 콘텐츠를

HTML :

<div class="picture-comments"> 
    <img class="img-responsive" src="http://www.healthyfoodhouse.com/wp-content/uploads/2012/10/5-healthy-breakfasts-for-fat-burning-eggs.jpg" alt="" title="" /> 
    <div class="article-comments"> 
     <div class="wrap"> 
      <h4>45</h4> 
      <h4>comments</h4> 
     </div> 
    </div> 
    <!-- /.comments --> 
</div><!-- picture-comments --> 

CSS :

.picture-comments { 
    position: relative; 
} 

img { 
    width: 100%; 
} 

.article-comments { 
    text-align: center; 
    color: #000; 
    position: absolute; 
    width: 50%; 
    height: 100%; 
    top: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.5); 
    display:table; 


    h4 { 
     font-family: $body-font; 
     font-weight: 600; 
    } 

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

}