如何将元素置于容器中心，同时保持它们垂直对齐？

Question

不确定如何正确标题。最好用图像解释。 我试图将项目保持在中心位置，但是如果在一行上有太多不合适的项目，则新行应与其上方的项目对齐，而不是在容器中居中。

我正在努力实现这一目标：

而不是：

这是我的JSfiddle：

http://jsfiddle.net/6kwzy6La/

我的HTML：

<div class="container2">
    <div class="content">

        <div id="box">
            <p> Some text goes here </p>
        </div>

        <div id="box">
            <p> Some text goes here </p>
        </div>

        <div id="box">
            <p> Some text goes here </p>
        </div>

        <div id="box">
            <p> Some text goes here </p>
        </div>

        <div id="box">
            <p> Some text goes here </p>
        </div>

    </div>
</div>

Answer 1

http://jsfiddle.net/6kwzy6La/

Container1
{
text-align: center;
}

Container2
{
text-align: left;
}

Answer 2

一种方法是在最后一个方框中添加一个合适的右边距，如果有奇数个方框，就像这样

#box:last-child:nth-child(2n + 1) {
    margin-right:240px;
}

请参阅http://jsfiddle.net/6kwzy6La/6/

请注意，您应该使用class而不是id，因为id在文档中应该是唯一的。