javascript - JQuery 移动版 : Vertically and horizontally center multiple images using grid

Question

我正在使用 jquery mobile 构建一个应用程序。我想使用网格将多个图像垂直和水平居中，我希望图像正好位于页面的中心。我已经尝试了所有方法，但没有任何效果。

我希望它看起来像这张照片中的样子: Sample

这是我的代码:

<div data-role="content"> 
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
        </div>
        <div class="ui-block-b">
            <img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
        </div>
        <div class="ui-block-a">
            <img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
        </div>
        <div class="ui-block-b">
            <img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
        </div>
    </div>
</div>

如果它看起来与所附图片完全一样，我会很高兴。

谢谢。

Answer 1

您可以缩放内容 div 以获取设备高度:

$(document).on( "pagecontainershow", function(){
    ScaleContentToDevice();

    $(window).on("resize orientationchange", function(){
        ScaleContentToDevice();
    })
});

function ScaleContentToDevice(){
    scroll(0, 0);
    var content = $.mobile.getScreenHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
    $(".ui-content").height(content);
}

然后在网格上使用一些 CSS 使缩放后的内容居中:

<div id="GridWrapper">
  <div class="ui-grid-a centeredGrid">
    <div class="ui-block-a" >
        <img alt="" src="http://i.imgur.com/MIK25Fd.png" >
    </div>
    <div class="ui-block-b">
        <img alt="" src="http://i.imgur.com/MIK25Fd.png" >
    </div>
    <div class="ui-block-a" >
        <img alt="" src="http://i.imgur.com/MIK25Fd.png" >
    </div>
    <div class="ui-block-b">
        <img alt="" src="http://i.imgur.com/MIK25Fd.png" >
    </div>
  </div>
</div>

#GridWrapper{
  position: relative;
  height: 100%;
}
#GridWrapper .centeredGrid{
  position: absolute;
  width: 380px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

DEMO