如何在父容器没有宽度的情况下居中对齐浮动 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; 但没有成功。因此需要使用实际的 来实现强大的居中行为。

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;
}

Answer 3

使用罗马答案我以此结束。我的父 div 内的所有 div 都会居中，因此您不需要设置子类。

.parent{
    text-align: center;
}

.parent div{
    display: inline-block;
}