JQuery mobile:使用网格将多个图像垂直和水平居中

JQuery mobile: Vertically and horizontally center multiple images using grid

本文关键字：图像 垂直 水平居中 mobile 网格 JQuery      更新时间：2023-09-26

我正在使用jquery mobile构建一个应用程序。我想使用网格垂直和水平居中多个图像，我希望图像正好在页面的中心。我什么都试过了，但都没用。

我希望它看起来和这张照片中的一模一样：样品

这是我的代码：

<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>

如果它能和所附的图片一模一样，我会很高兴的。

谢谢。

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

演示

您可以尝试使用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/

相关文章：