以动画Div为中心

Question

我有这个小伙伴，我发现我根据自己的喜好修改了一点。问题是我不能正确对齐。我的目标是在它们全部折叠时使五列居中，并在展开一列时使它们居中。

http://jsfiddle.net/422MP/

#mainContainer
{
    margin:0 auto;
    width: 500px;
    height: 100%;
    overflow: hidden;
}

.sidebar
{
    float: left;
    height: 300px;
    width: 20%;
    /* left: 565px;*/
    border: 2px red dashed;
    /*position: relative;i*/
    overflow: hidden;
    margin:0 0px 0 10px;

}

**编辑**为了更清楚一点，似乎当一个div被展开时它会居中。当它们全部关闭时，它们会向左对齐。

谢谢！

Answer 1

在这里演示：http://jsfiddle.net/422MP/34/

当您为元素固定宽度时，这会更容易，这就是我所做的。但是javascript也更清晰。

要使元素居中，您只需摆脱float: left样式，这样会对中心对齐造成严重破坏，并将容器的text-align设置为center。

Answer 2

所有侧边栏都是浮动的：左边和javascript实际上是它们的宽度：当它们关闭时为10％，这意味着它们最终只占据容器的左半部分。包含所有侧边栏的div实际上是居中的。您可能希望更改JS以使其保持在20％并在打开时扩大包含div。