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

Answer 3

使用罗马的回答我结束了这个。我父div中的所有div都会居中，所以你不需要设置子类。

.parent{
    text-align: center;
}

.parent div{
    display: inline-block;
}

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

3 个答案: