Question

我想以div为中心，例如：

<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，第一行完全填满，然后另外两个包裹到另一行但是也自己居中。

这里适用的样式是什么？

由于

Answer 1

尝试将top div（宽度为100％;）设置为text-align：center;然后给每个div一个显示：inline-block;和保证金：自动;

这适用于chrome，opera，FF但不适用于资源管理器。

IE仅支持内联项的内联块，所以要使它在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>

向左漂浮的中心div？

1 个答案: