Question

如果他们有一个名为“vcenter（＃）”的类，我正在尝试将函数写入垂直居中元素。例如，vcenter1 vcenter2。它应该取元素的父亲的内部高度并减去元素的内部高度然后除以2.然后将值作为边缘顶部应用于css。它不起作用。请帮忙！

$(document).ready(function(){
    for (i=1; i<3; i++){
        var childID = $(".vcenter" + i);
        var parent = childID.parent().innerHeight();
        var child = childID.innerHeight();
        var marginTop = (parent - child)/2 + 'px';
        $(childID).css({"margin-top", marginTop})
    }
});

Answer 1

这个怎么样...... http://jsfiddle.net/mVn9S/

$(document).ready(function () {
    $('.vcenter').each(function () {
        var parent = $(this).parent().innerHeight();
        var child = $(this).innerHeight();

        $(this).css({
            'margin-top': ((parent - child) / 2) + 'px'
        });
    });
});

您是否考虑过将CSS3 Flexbox与旧版IE一起使用polyfill？可能会少工作。

Answer 2

将您的代码更改为：

$(document).ready(function(){
    for (i=1; i<3; i++){
        var childElement = $(".vcenter" + i);
        var parent = childElement.parent().innerHeight();
        var child = childElement.innerHeight();
        var marginTop = (parent - child) / 2;
        childElement.css({"margin-top": marginTop});
    }
});

注意在行尾使用; - 即使在JS中这也是一个好习惯。

我不知道您的HTML看起来如何，但可能很容易对.vcenter类的所有元素进行推广：

$(document).ready(function(){
    $('.vcenter').each(function() {
        var childElement = $(this);
        var parent = childElement.parent().innerHeight();
        var child = childElement.innerHeight();
        var marginTop = (parent - child) / 2;
        childElement.css({"margin-top": marginTop});
    });
});

javascript函数到垂直居中元素

2 个答案: