JavaScript函数垂直居中元素

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