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

Question

Not really sure how to properly title this. It is best explained with images. I am trying to keep the items centered, but when there is too many to fit properly on one line, the new line should be aligned with the item above it, not centered within the container.

I am trying to achieve this:

Instead of this:

Here is my JSfiddle:

http://jsfiddle.net/6kwzy6La/

And my 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

One approach is to add an appropriate right margin to the last box if there are a odd number of boxes, like this

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

See http://jsfiddle.net/6kwzy6La/6/

Note that you should be using class not id as id s should be unique within the document.