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 +的支持

检查其兼容性

编辑：

作为解决方法，您可以选择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();
//
});

推荐这个职位