javascript - jquery 移动内容垂直居中

Question

我有几个页面 (data-role="page")，每个页面都有一个内容 div (data-role="content")。我只是想在每个页面上垂直集中内容 div。我试过垂直对齐，没用。我尝试获取浏览器高度并分配顶部，如下所示:

home_height = $("#home_page_content").height();
            contentTop = (browserHeight - headHeight - home_height)/2;
            $("div:jqmData(role='content')").css("position", "relative").css("top", contentTop);

但它在除主页之外的其他页面上不起作用。因为 height() 对不可见元素不起作用，内容高度将始终为 0。

然后我尝试了一种 css hacking 方式来获取其他内容，如下所示:

$("#lounge-content").css({
                position:   'absolute',
                visibility: 'hidden',
                display:    'block'
            });
            lounge_height = $("#lounge-content").height();
            $("#lounge-content").css({
                position:   'static', // Again optional if #myDiv is already absolute
                visibility: 'visible'
            });
            loungeTop = (browserHeight - headHeight - lounge_height)/2;
            console.log("lounge height is: " + lounge_height + ", lounge top value now is: " + loungeTop);
            $("#lounge-content").css("position", "relative").css("top", loungeTop);

问题是当我打开文件时，我只能看到标题，内容被隐藏，我必须刷新浏览器才能看到所有内容。它工作正常。

但这显然不是一个非常方便的方法。也许垂直集中的 div 永远不会那么困难？有人可以帮帮我吗。非常感谢!

Answer 1

因为 jQM，找到正确的内容大小可能很棘手，没有它你就无法将它垂直居中。

data-role="content" div 高度只能在 pageshow 页面事件中获取。每隔一个实例都会给你内容高度 0。

我给你做了一个工作示例:http://jsfiddle.net/Gajotres/JmqX6/

$('#index').live('pageshow',function(e,data){    
    $('#index-content').css('margin-top',($(window).height() - $('[data-role=header]').height() - $('[data-role=footer]').height() - $('#index-content').outerHeight())/2);
});

如果您在 jQM 中实现这个需要帮助，请联系我。

编辑 (23.02.2015)

更新的 jsFiddle 示例:http://jsfiddle.net/udvhs0Lb/

• live() 在 jQuery 中不再可用(我认为是从 jQuery 1.8.3 开始)，因此页面甚至绑定(bind)应该如下所示:

    $(document).on('pageshow','#index', function(e,data){