如何居中对齐父容器没有宽度的浮动div？

Question

我知道之前已经问过类似的问题,但是我没有看到父div具有未知宽度且具有明确答案的问题.

所以情况就是这样.

<style>
.parent {
   width: 100%;
}

.child {
  width: 300px;
  float: left;
}

</style>

<div class="parent>
  <div class="child></div>
  <div class="child></div>
  <div class="child></div>
  <div class="child></div>
  <div class="child></div>
  <div class="child></div>
  ...
  <div class="child></div>
<div>

基本上,我希望在父容器中容纳尽可能多的子div,因为用户的屏幕分辨率可以支持.

我不想使用css3媒体查询,因为我想支持IE7.

我尝试使用javascript为父级指定宽度,但由于内容在加载后跳转到中心,因此不太理想.有任何想法吗？

Answer 1

只需使用display:inline-block;而不是 float: left;.parent使用text-align: center.

Answer 2

这是最接近的解决方案，不使用 javascript。它display:inline-block;使 div 侧边栏同时位于中心。我尝试将 .parent 变成display:table-cell;但没有成功。因此需要使用实际的<table>强大的居中行为。

http://jsfiddle.net/Dgdhr/

编辑： http: //jsfiddle.net/Dgdhr/1（没有表格：感谢 MartinodF）

<table width="100%">
<tr>
<td align="center">   
          <div class="child">1</div>
          <div class="child">2</div>
          <div class="child">3</div>
          <div class="child">4</div>
          <div class="child">5</div>
          <div class="child">6</div>   
</td>
</tr>
</table>

.child {
    width: 100px;
    height:100px;
    margin:10px;
    display:inline-block;
    background:#e0e0e0;
}