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垂直对齐功能

回答

相关问题