jQuery垂直對齊功能

Question

我在互聯網上發現了一個CSS技巧，可以垂直對齊一個元素（鏈接： http : //www.vdotmedia.com/blog/vertically-center-content-with-css/ ，雖然不完全相同，但是思路相同。） 。

我決定將其放入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中包裝了元素（又名“ this”），其余的包裝似乎都沒有生效，我檢查了html，我只看到了第一個div和元素。

有人知道為什么會這樣嗎？ 也許有更好的方法可以做到這一點？

Answer 1

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類，此函數可在窗口加載時使用！

Answer 2

我無法確定您的技術是否會按您的意願進行操作，但是如果您想按指定的順序將元素包裝在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'
  });
};

我建議的另一件事是只定義一些具有要應用於div的樣式的類，然后僅在元素上調用addClass（），而不是直接定義css屬性，這會將它們作為樣式屬性添加到元素。

另外，使用inspect元素或使用view source | 從FF的Web開發人員工具欄插件查看生成的源代碼，以確保您查看的是dom，而不是不會顯示動態添加元素的html源。