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
December 8, 2016, 9:08pm
2
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,
1 Like
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
December 8, 2016, 9:22pm
4
I must have misunderstood as I thought the blocks were supposed to be side by side
You were right, this is what I wanted. Thank you
system
Closed
March 10, 2017, 7:33am
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.