jquery - 网格中心的一个 ui block - jquery mobile

Question

我使用 jquery mobile 中的网格来设计页面。我想要一个 block 恰好放在中间。

首先在一个网格内将有 2 个 block ，均等放置，在下一个网格中将有一个 block ，我希望它居中。

JSFiddle

我尝试了一些技巧，比如

margin: 0 auto

他们都还没有工作。我怎样才能在中间取一个 ui-block 并与上面的 2 个 block 具有相同的宽度？ (代码在jsfiddle里面)

Answer 1

您可以覆盖 JQM ui-block-a 类，在这里您的 block 宽度将与第一个网格中的 block 相同。试试这个 DEMO

更改:在您的第二个网格中添加了ma​​rgin-left:25%;。

代码:

<div data-role="page">

    <div id="content" data-role="content">
        <div class="ui-grid-a" id="mymenu">
                    <div class="ui-block-a image_class" id="daily_sehri_iftar" style="background:#000000;"><div class="ui-bar ui-bar-a" style="text-align: center">hhh</div></div>
                    <div class="ui-block-b image_class" id="monthly_sehri_iftar" style="background:#000000;"><div class="ui-bar ui-bar-a" style="text-align: center">aaaa</div></div>
                </div>
                <div class="ui-grid-a" id="mymenu">
                    <div class="ui-block-a image_class" id="prayer_time" style="background:#000000;margin-left:25%;"><div class="ui-bar ui-bar-a" style="text-align: center;">aaaaa</div></div>
                </div>
    </div>
</div>