我正在构建一个使用jQuery移动的应用程序。我想要使用网格垂直和水平居中多个图像，我希望图像完全位于页面的中心。我尝试了一切，但没有真正奏效。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>

我喜欢它是否能完全一样附有影像。

谢谢。

来源

2016-04-21 Eli R

您是否尝试过寻找到flexboxes？ –

您可以缩放内容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

来源

2016-04-21 14:30:05 ezanker

谢谢你，我真的不能够感谢你，我真的很感激。 –

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

来源

2016-04-21 04:25:26

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

回答

DEMO

相关问题