Clever Geek Handbook

How is the center element in the container while keeping them vertically aligned?

Not sure how to properly make amends for this. This is best explained with images. I try to keep the elements centered, but when there are too many to fit on a single line, the new line should be aligned with the element above, not centered in the container.

I am trying to achieve this:

enter image description here Instead of this:

enter image description here

Here's 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>
+3


source to share


2 answers


http://jsfiddle.net/6kwzy6La/



Container1
{
text-align: center;
}

Container2
{
text-align: left;
}
+1


source


One approach is to add a suitable right margin to the last square if there is an odd number of boxes, for example

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


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

Note that you must use class

not id

as it id

must be unique in the document.

0


source






More articles:


All Articles