如何在父容器没有宽度的情况下居中浮动的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来指定父容器的宽度，但这不是理想的解决方法，因为加载后内容会跳到中心。有什么好的建议吗？

- user927797

---

如何水平居中对齐无序列表（ul）菜单？要让无序列表菜单水平居中对齐，您可以使用以下CSS代码：ul { display: flex; justify-content: center; }这会将无序列表的显示属性设置为Flex，并使项目在水平方向上居中对齐。 - reisio

Answer 1

只需使用display:inline-block;替代float:left;，对于父元素使用text-align:center;。

- Roman

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

- Moe Sweet

---

这个问题在于如果您的子div中有不同的内容; http://jsfiddle.net/Dgdhr/76/ - Marcus

Answer 3

使用Roman的方法，我得到了这个结果。我的父div内的所有子div都将居中，因此您不需要设置子类。

.parent{
    text-align: center;
}

.parent div{
    display: inline-block;
}

- Renan Ceratto