IE7에서 부모 DIV 내에서 세로 맞춤 DIV

Question

상위 DIV 내에서 X 개수의 DIV를 세로 정렬 할 수 있습니다.

모든 DIV에는 고정 높이가 없습니다.

IE7을 제외한 모든 브라우저에서 작동합니다.

<div class="parent"> 
    <div class="left"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac faucibus nisi. Proin nec eros est, vitae rhoncus purus. 
    </div> 
    <div class="right"> 
     <img src="image.gif" width="50" height="50"> 
    </div> 
</div> 
.parent { 
    display: table; 
    vertical-align: middle; 

} 
.left, .right { 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 1

IE7이 display: table-cell; 속성을 지원하지 않습니다

, 그것은 IE8에서 지원이 +

Check its Compatibility

편집 :

해결 방법으로 선택할 수있는 jQuery를 -

$(function() { 
// vertical align function 
$.fn.vAlign = function() { 
    return this.each(function(i){ 
     var ah = $(this).height(); 
     var ph = $(this).parent().height();  
     var mh = Math.ceil((ph-ah)/2); //var mh = (ph - ah)/2; 
     $(this).css('margin-top', mh); 
    }); 
}; 

$('.greenBorder img').vAlign(); 
// 
}); 

Refer this post