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

我知道之前已经问过类似的问题,但是我没有看到父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为父级指定宽度,但由于内容在加载后跳转到中心,因此不太理想.有任何想法吗？

解决方法

这是最近的解决方案,不使用javascript.
它是显示：内联块;这使得divs侧杆并同时处于中心位置.我试着将.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;
}

原文地址：https://www.jb51.cc/css/214831.html