的 DEMO

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

您可以尝试 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 mobile：使用网格垂直和水平居中多个图像

2 个答案:

的 DEMO