jquery - 如何在移动窗口的中心显示 jquery 移动页面？

Question

我只想在移动窗口的中央显示我创建的页面。

我试过如下:

<div data-role=page id=dcr >
    <div data-role=header data-theme="b" >
        <a href="home.php" data-icon="home"><font size="1px">home</font></a>
        <h1 align="left" ><font size="1px">DCR</font></h1>
    </div> 
    <div class="ui-grid-b" data-theme="c">
        <div class="ui-block-a align-left">
          <a onClick="setData('spanminus');setData('others|spanminus');" data-role="button" data-icon="arrow-l" data-iconpos="notext"></a>        


        </div>
        <div class="ui-block-b center-wrapper">
          <span><font size="1" color="blue" ><b><label id="topDt"><?php echo date('D M j Y',strtotime($tDate));?></b></label></font></span>
          <span id="dcrDt" hidden><?php echo $tDate;?></span>
        </div>
        <div class="ui-block-c button-right">
          <a onClick="setData('spanplus');setData('others|spanplus');" data-role="button" data-icon="arrow-r" data-iconpos="notext"></a>
        </div>
    </div>
    <div data-role=content data-theme="d" id="dcrCall">
        <div data-role=span style="align:center;"> 
            <span><font size="1" color="blue" >Status: Draft - 2 Days left to submit</font></span>
        </div>
        <br/>
        <?php
            $seldly=$dbHandle->execQuery("SELECT dd.doctor_id,dd.saved_on FROM tour_plan tp,doctor_dcr dd WHERE tp.user_id='$userId' AND tp.plan_id=dd.plan_id AND tp.tour_date='$tDate'");
            $gNR=$dbHandle->getNumRows($seldly);
        ?>
        <ul data-role=listview <?php echo ($gNR > 0)?'data-filter=true':'';?>>
            <?php
                if($gNR > 0)
                {
                    while($fetdly=$dbHandle->fetchObjectQuery($seldly))
                    {
                    ?>
                        <li> <?php echo docFullName($fetdly->doctor_id);?></li>
                    <?php
                    }
                }
                else
                {
                    ?>
                    <li><font size="1">No Calls</font></li>
                <?php
                }
                ?>
        </ul>
    </div>
    <div data-role="collapsible" id="unplanCall">
        <h3>Add Unplanned Call</h3>
        <ul data-role=listview>
                <li><input type="text" id="doc" name="doc" /><input type="hidden" id="doc_id" name="doc_id" /> </li>
                <li><input type="button" value="Add" onClick="addUnplan();"/> </li>
        </ul>
    </div>
</div>

我使用了 CSS 技术来实现它，但我做不到。

Answer 1

尝试将内容包裹在一个 div 中并居中对齐，使用表格

<table cellpadding="0" cellspacing="0" border="0"> 
<tr><td width="20%"></td>

  <td width="80%"><div id="wrap">

         //content goes here..............

       </div>
  </td>

  <td width="20%"></td>
</tr>
</table>