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

我知道类似的问题之前已经被问过，但我还没有看到一个父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来指定父宽度，但它不是理想的，因为内容加载后跳转到中心。有任何想法吗？

来源

2011-11-15 tkaravou

http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu – reisio

这是不使用javascript的最近解决方案。同时使div边栏位于中心的是display:inline-block;。我已尝试将.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; 
}

来源

2011-11-15 03:53:33

你不需要''

元素。见http://jsfiddle.net/MartinodF/Dgdhr/1/ – MartinodF

这个问题是，如果你有不同的内容在儿童divs内; http://jsfiddle.net/Dgdhr/76/ – Marcus

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

来源

2012-07-14 21:08:33 Roman

谢谢男士谢谢:) – Farshid

使用罗马答案我结束了这一点。我父母div中的所有div都将居中，所以你不需要设置子类。

.parent{ 
    text-align: center; 
} 

.parent div{ 
    display: inline-block; 
}

来源

2014-03-07 00:28:04

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

回答

相关问题