Centering elements

[jpyamamoto9]

My code has the following structure:

<div>
    <h1></h1>
    <div>
        <h2></h2>
        <p></p>
    </div>
</div>

The h1 element is perfectly centered, however, I want to center horizontally the div inside the first one.
I’m trying to make it responsive.

For example, if there are 3

inside the main one, and in the screen fit only two side by side, the third one should be placed centered under the other two.

My code is this: https://jsfiddle.net/1yvjLjzq/

[PaulOB]

Hi,

If you use inline-block instead of float then the elements will sit alongside each other and be centred by the text-align:center on the parent.

e.g.

.block {
display:inline-block;
vertical-align:middle;    
margin: 10px;
padding: 10px;
max-width: 300px;
min-height: 300px;
color: #707273;
}

You will need to increase the 50% width on content-main though otherwise there won’t be room for them to sit side by side. Also vertical-align only applies to elements that are inline, inline-block or table-cell so the rule on content-main should be removed as it does nothing,

[Pepster64]

You could also do it this way:

.block {
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: 10px;
    margin-left: -150px;
    padding: 10px;
    display: block;
    width: 100%;
    max-width: 300px;
    height: 300px;
    color: #707273;
}

https://jsfiddle.net/Strider64/1yvjLjzq/4/

[PaulOB]

@Pepster64

You could also do this way:

I must have misunderstood as I thought the blocks were supposed to be side by side

[jpyamamoto9]

You were right, this is what I wanted. Thank you