JQuery垂直對齊功能

我在互聯網上發現了一個CSS技巧，並垂直對齊一個元素（鏈接：http://www.vdotmedia.com/blog/vertically-center-content-with-css/，不完全一樣，但是相同的想法。）。JQuery垂直對齊功能

我決定把它變成一個jQuery功能：

$.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 
       ) 
      ) 
     ); 
    };

我的問題是，它僅包裝元素（又名「這個」）在第一個div中，包裝的其餘部分似乎並沒有生效，我檢查了HTML，我只看到第一個div和元素。

任何人都知道這是爲什麼？也許有更好的方法來做到這一點？

來源

2011-08-26 FinalFortune

你想解決什麼樣的大問題？如果只是垂直對齊元素，則幾乎肯定不需要任何JavaScript，因爲這可以嚴格使用CSS來完成。 –

是你想在每個包裝後包裝這個父母，也許？ – kinakuta

不可讀的意大利麪代碼T_T。 – JMelnik

我不能爲你希望你的技術是否會做發言，但如果你想你的包裝元素在您指定的順序的div，你要添加父（）調用您的鏈條，所以你」重新包裝的權利元素：

$.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' 
    }); 
};

我建議的另一件事是剛剛定義與要應用到div然後只需在元素上調用addClass（），而不是定義的CSS樣式類的一些屬性直接將它們作爲樣式屬性添加到元素中。

此外，使用inspect元素或使用視圖源|查看FF生成的Web Developer toolbar插件生成的源代碼，以確保您查看存在的dom，而不是不顯示動態添加元素的html源代碼。

來源

2011-08-26 23:18:33 kinakuta

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

只是使用class align-vertical和這個函數在window load上使用！

來源

2015-03-31 11:26:27

JQuery垂直對齊功能

回答

相關問題