如何将表放在浏览器的中心

Question

我正在开发移动应用程序。我有一个Div，因为我已经创建了一个表格，如果我改变浏览器大小，我希望它在中心。 我试过的是：

   <div data-role="content"

<div align="center" height:50px; ">
  <table>
    <tr>
      <td width="20%"><img src="images/1.png" ></td>
      <td width="80%"  ><a href="#" class="custom-btn" data-role="button" data-    mini="true">sunday</a></td>
    </tr>
   </table>
</div>
<br>
<div align="center"  height:50px;">
  <table>
    <tr>
      <td width="20%"><img src="images/3.png" ></td>
      <td width="80%"  ><a href="#" data-role="button" class="custom-btn" data-mini="true">Monday</a></td>
    </tr>
  </table>
</div>

Answer 1

CSS margin: 0 auto;将使表格居中。

为表格提供一个类名称（例如centeredTable）：

<div>
    <table class="centeredTable">
        <tr>
            <td><img src="http://lorempixel.com/26/26/food/1/" /></td>
            <td><a href="#" class="ui-btn ui-corner-all custom-btn ui-shadow ui-mini">sunday</a></td>
        </tr>
    </table>
</div> 

然后创建CSS规则：

.centeredTable {
    margin: 0 auto;
}

<!-- optional rules for vertical center, first td 20%, last td 80% -->
.centeredTable td{
    vertical-align: middle;
}
.centeredTable tr td:first-child{
    width: 20%;
}
.centeredTable tr td:last-child{
    width: 80%;
}

  

这是 DEMO