javascript函数垂直居中元素答案

【问题标题】：javascript function to vertically center elementjavascript函数垂直居中元素
【发布时间】：2014-01-21 17:50:39
【问题描述】：

如果元素有一个名为“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})
    }
});

【问题讨论】：

您正在将变量“childID”的值设置为字符串。然后，您可以像使用 jQuery 对象或其他东西一样使用它。你在用 jQuery 吗？
是的，我对它有点陌生，对不起！
那么你想要childID = $(".vcenter" + i); 吗？？
我刚试了一下，没用:(

标签： javascript function for-loop vertical-alignment

【解决方案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'
        });
    });
});

您是否考虑过在旧版本的 IE 中使用 CSS3 Flexbox 和 polyfill？可能会少一些工作。

【讨论】：

@user2540029 我建议您将$(this) 替换为$this，这是您在每个函数开头创建的变量。否则，那些新的$(this) 创建会堆积起来并影响您的执行速度。

【解决方案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});
    });
});

【讨论】：

hmmm 刚刚尝试了一下，但它不起作用，不过感谢您的反馈！
您能解释一下为什么它不起作用吗？居中错误，根本不居中？控制台出错？
这个函数实际上什么都不做
查看示例：jsfiddle.net/HUr9z/1 注意所使用的 CSS 样式和绝对定位。