JQueryの垂直整列機能

Question

インターネット上でCSSトリックを見つけ、要素を垂直に整列させました（リンク：http://www.vdotmedia.com/blog/vertically-center-content-with-css/、まったく同じアイデアではありません）。

私はjqueryの関数にそれを置くことにしました：私の問題は、それが最初のdiv内の唯一の要素（別名「これを」）ラップということです

$.fn.centreVertical = function() 
    { 
     $(this).wrap(                                  //centered element 
      $("<div/>").css({'position':'relative','top':'-50%'}).wrap(                  //child 
       $("<div/>").css({'position':'absolute','top':'50%','display':'table-cell','vertical-align':'middle'}).wrap(  //parent 
        $("<div/>").css({'margin':'auto','display':'table','height':'100%','position':'relative','overflow':'hidden'}) //grandparent 
       ) 
      ) 
     ); 
    }; 

、ラップの残りの部分はいないようです有効にするには、私はHTMLをチェックし、私は最初のdivと要素のみを参照してください。

これがなぜそうであるか知っていますか？おそらくこれを行うより良い方法がありますか？

Answer 1

あなたのテクニックがあなたの望みどおりにできるかどうかは分かりませんが、あなたが指定した順序でdivに要素を折り返したい場合は、チェーンにparent（）右の要素をラップ再：

$.fn.centreVertical = function() { 
    $(this).wrap('<div/>').css({ 
    'position': 'relative', 
    'top': '-50%' 
    }).parent().wrap('<div/>').css({ 
    'position': 'absolute', 
    'top': '50%', 
    'display': 'table-cell', 
    'vertical-align': 'middle' 
    }).parent().wrap('<div/>').css({ 
    'margin': 'auto', 
    'display': 'table', 
    'height': '100%', 
    'position': 'relative', 
    'overflow': 'hidden' 
    }); 
}; 

私がお勧めしたい他の事はちょうどあなたがちょうど要素にaddClass（）を呼び出すのではなく、CSSを定義するdiv要素に適用するスタイルでいくつかのクラスを定義することですこれらの要素を直接スタイル属性として要素に追加します。

さらに、inspect要素を使用するか、ビューソースを使用してください。生成されたソースをWeb Developer toolbarアドオンからFFに表示して、動的に追加された要素を表示しないhtmlソースではなく、存在するDOMを確認してください。

Answer 2

function alignVertical(){ 
    $('.align-vertical').each(function() { 
     var that = $(this); 
     var height = that.height(); 
     var parentHeight = that.parent().height(); 
     var padAmount = (parentHeight/2) - (height/2); 
     that.css('padding-top', padAmount); 
    }); 
} 

クラスalign-verticalを使用して、この関数をウィンドウロードで使用してください。