1

我有几个页面（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 不应该那么困难？有人可以帮帮我吗。非常感谢你！

4

4 回答 4

6

由于 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 开始），所以页面甚至绑定应该如下所示：

      $(document).on('pageshow','#index', function(e,data){
于 2013-01-17T13:24:25.090 回答
5

以下适用于多个 jQM 页面和多个隐藏/显示的页眉和页脚：

applyVerticalCentering = function() {
    $(this).on('pagebeforeshow',function(e,data){
        $('[data-vertical-centred]').hide();
    });

    $(this).on('pageshow resize',function(e,data){    
        $('[data-vertical-centred]').each(function(index){
            var _this = $(this);
            _this.css('margin-top',
                      ($(window).height() -
                       $('header:visible').height() -
                       $('footer:visible').height() -
                       _this.outerHeight())/2);
            _this.show();
        });
    });
}();

然后在 html 中使用声明式样式：

<div data-role="content" data-vertical-centred>
    hi there in the middle!
    <a href="#page1" data-role="button">clicky</a>
</div>

例子：http://jsfiddle.net/hungrycamel/82KX6/

于 2014-01-30T13:32:32.140 回答
1

感谢您的回答。对我来说，触发器不起作用，似乎是由于较新的 jquery 版本

$('#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);
});

因此，下面是适用于我的修改后的代码（仅更改了触发器）

$(document).on('pageshow', '#index', function(event) {
$('#index-content').css('margin-top',($(window).height() - $('[data-role=header]').height() - $('[data-role=footer]').height() - $('#index-content').outerHeight())/2);
});
于 2014-04-02T10:47:44.213 回答
0

必须上课才能做到这一点。一种用于垂直居中，一种用于垂直和水平：

.h-centered-item {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%)
}

.vh-centered-item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

只需将其应用于要垂直居中或两者都居中的元素

于 2018-07-18T19:15:42.717 回答