html - 在 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();
//
});

参考这篇文章