![](/img/trans.png)
[英]JQuery mobile: Vertically and horizontally center multiple images using grid
[英]How to make grid elements horizontally to vertically aligned when mobile orientation changed with JQuery Mobile?
我有一個簡單的JQuery Mobile網頁,其中一個網格具有水平對齊的四個塊。 每個塊都有一些文本說明和一個按鈕。
它在桌面瀏覽器上顯示得很好,而當在我的android銀河手機上顯示時,這些塊看起來仍然很緊,因為它們仍然是水平對齊的。
當屏幕從縱向朝向橫向時,如何配置或設置網格樣式以自動垂直對齊圖塊?
<div id="grid1" class="ui-grid-c">
<div class="ui-block-a">
<div class="div-widget" id="divEnterObs">
<h2>Enter Observations</h2>
<span>View and enter observations by map or form.</span>
<a data-ajax="false" href="LocationlistingServlet"
data-role="button" id="btnEnterObs" data-theme="a" data-corners="true" data-shadow="true"
data-inline="false" data-mini="false">
Enter Observations</a>
</div>
</div>
<div class="ui-block-b">
<div class="div-widget" id="divManageUserAccess">
<h2>Manage user access</h2>
<span>Manage and appoint members that can access the app.</span>
<a data-ajax="false" href="manageUserAccess.jsp"
data-role="button" id="btnManageUserAccess" data-theme="a" data-corners="true" data-shadow="true"
data-inline="false" data-mini="false">
Manage User Access</a>
</div>
</div>
<div class="ui-block-c">
<div class="div-widget" id="divManageLocations">
<h2>Manage locations</h2>
<span>Add, update or activate / de-activate locations.</span>
<a data-ajax="false" href="#"
data-role="button" id="btnManageLocations" data-theme="a" data-corners="true" data-shadow="true"
data-inline="false" data-mini="false">
Manage Locations</a>
</div>
</div>
<div class="ui-block-d">
<div class="div-widget" id="divAdminTools">
<h2>Admin Tools</h2>
<span>Execute admin functions.</span>
<a data-ajax="false" href="#"
data-role="button" id="btnAdminTools" data-theme="a" data-corners="true" data-shadow="true"
data-inline="false" data-mini="false">
Admin Tools</a>
</div>
</div>
</div>
通過添加“ ui響應”解決了問題。
<div id="grid1" class="ui-grid-c ui-responsive">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.