JQuery 移动设备：使用网格将多个图像垂直和水平居中

Question

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

我希望它看起来像这张照片中的样子： 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

您可以尝试使用 flexbox 属性。

.ui-block-a,.ui-block-b{
      width: 30px;
      height: 30px;
      margin: 5px;
    }

    .ui-grid-a{
        display: flex;
        align-items: center;
        min-height: 15em;
        justify-content: center;
    }

有关 flexbox 的更多信息

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您可以缩放内容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%);
}

JQuery 移动设备：使用网格将多个图像垂直和水平居中

JQuery mobile: Vertically and horizontally center multiple images using grid

html

javascript

css

grid

jquery-mobile

DEMO