左侧浮动的中央divs？

我要居中的div，像这样：左侧浮动的中央divs？

<div style='width:100%;'> 

    <div style='float:left; width=40px; height=40px;'></div> 
    <div style='float:left; width=40px; height=40px;'></div> 
    <div style='float:left; width=40px; height=40px;'></div> 
    ... 

</div>

虽然我希望孩子的div将漂浮，于是他们出现在同一行，我想他们的水平行内居中。随着更多的div被添加，他们可能需要最终包装到另一行，这很好。但我希望这些项目也要集中。喜欢的东西：

|     | 
| X X X X X X | 
|  X X  |

所以在上面，足够孩子的div中添加的第一行是完全充满，那么这两个额外的人换到另一条线路，但得到集中自己太。

什么是正确的风格适用于此？

由于

来源

2010-08-04 user246114

'显示：内联block'弹簧头脑，但我不确定在这种情况下集中如何工作。 – You 2010-08-04 20:02:06

对于初学者，您应该使用双引号而不是单引号来分隔HTML属性值。你的内联样式使用'='而不是'：'... – 2010-08-04 20:03:06

尝试设置顶部DIV（具有宽度：100％）为具有文本对齐：中心;然后给每个div一个显示：inline-block;和margin：auto;

这将工作在铬，歌剧，FF但不是资源管理器。

IE只支持inline-block的内联项目，因此使它在IE工作使内部的div跨度，

这样

<div style="width:100%;text-align:center;"> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
</div>

来源

2010-08-04 20:15:19 Sruly

左侧浮动的中央divs？

回答

相关问题