Question

我在div和table上使用了margin:0 auto，但下拉列表和表格显示在浏览器的左侧（在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使其居中，您可以将显示更改为阻止：

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

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

请参阅演示：http://jsfiddle.net/audetwebdesign/eZHQZ/

Answer 2

请将对齐属性添加到Div和表中，如下所示：

<div align="center"></div>
<table align="center"></table>

这可能会对你有所帮助。

Demo

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

2 个答案: