如何将容器中的浮动中心放在中心位置

Question

是否可以将浮动的div放在容器中,如果是这样的话？

例如,我有一个带有容器div的页面,其中包含许多可变大小(动态生成)的浮动(左)div.div会溢出到下一行,但它们永远不会在容器div中居中,而是用左边的方式.它看起来像这样:

----------------------------
-                          -
- +++  +++++  ++++  ++     -
- +++  +++++  ++++  ++     -
-                          -
- ++   ++++++  +++  +      -
- ++   ++++++  +++  +      -
-                          -
----------------------------

虽然我希望浮动的div在容器中居中,如下所示:

----------------------------
-                          -
-   +++  +++++  ++++  ++   -
-   +++  +++++  ++++  ++   -
-                          -
-   ++   ++++++  +++  +    -
-   ++   ++++++  +++  +    -
-                          -
----------------------------

谢谢,

DLiKS

Answer 1

有可能的.使用http://www.pmob.co.uk/pob/centred-float.htm和http://css-discuss.incutio.com/wiki/Centering_Block_Element作为来源.

这是一个演示概念的小提琴,使用下面的HTML和CSS:https://jsfiddle.net/t9qw8m5x/

<div id="outer">
    <ul id="inner">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2 with long text</a></li>
        <li><a href="#">Button 3</a></li>
    </ul>
</div>

这是效果所需的最小CSS:

#outer {
    float: right;
    position: relative;
    left: -50%;
}

#inner {
    position: relative;
    left: 50%; 
}

#inner > li {
    float: left;
}

说明:

从li { float: left; }规则开始.然后将这些浮动包裹在中left: 50%; relative position,因此该<ul>框的左边缘位于页面的水平中心,然后使用规则#outer进行正确调整,使其中心#inner与页面对齐.