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

我无法说出您的技术是否会按照您的意愿执行，但如果您想按照指定的顺序将元素包装在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元素或使用视图源|查看从Web Developer toolbar加载项到FF的生成源，以确保您查看dom，因为它存在而不是html源，它不会显示动态添加的元素。

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

只需使用class align-vertical，此函数用于窗口加载！

JQuery垂直对齐功能

2 个答案: