html - 如何将下拉列表和表格元素放在页面的中心？

Question

我用了margin:0 auto在 div 和表格上，但下拉列表和表格显示在浏览器的左侧(在 Chrome 和 Firefox 中)。在 IE 中，表格位于页面的水平中心，而不是下拉列表。

代码如下:

 <div >
        <select id="ddl" onChange="showTA()" style="margin:0 auto">
            <option value="none">Select Product</option>
            <option value="ib">IB</option>
            <option value="rs">RS</option>
            <option value="bp">BP</option>
        </select>
  </div>
  <div>
        <table id="selectBox" class="tables" 
                    style="display:none; margin:0 auto;">
                <tr class="header_rows">
                    <th>ID</th>
                    <th>HostOS</th>
                    <th>BuildID</th>
                    <th>Description</th>
                    <th>User</th>
                    <th>StartTime</th>
                </tr>
                <tr class="data_rows" ng-repeat='b in t1'>
                    <td class="tds">{{b.ID}}</td>
                    <td class="tds">{{b.HostOS}}</td>
                    <td class="tds">{{b.BuildID}}</td>
                    <td class="tds">{{b.Description}}</td>
                    <td class="tds">{{b.User}}</td>
                    <td class="tds">{{b.StartTime}}</td>
                </tr>
        </table>
  </div>

我想要的是 ddl以及table即使浏览器的大小发生变化，也应该始终位于页面的中心。(我需要一个 css 解决方案。如果不可能，那么我也会接受 Javascript)，而且我不想使用 <center>标签。

Answer 1

默认情况下，您的 select 元素是内联元素。要使用 margin: 0 auto 将其居中，您可以将显示更改为 block :

<select id="ddl" onChange="showTA()" style="display: block; margin:0 auto;">

您的 table 实际上是正确居中的，除非您的样式表中有一些 CSS 规则导致冲突。

参见演示:http://jsfiddle.net/audetwebdesign/eZHQZ/