0

親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;
 }
4

1 に答える 1

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

この投稿を参照してください

于 2012-10-25T06:38:55.967 に答える