I need to responsively center the elements next to each other so it is positioned like in the bottom example. The bottom example is just a centered image.
Do note though that your HTML structure could be cleaned up (less elements) although I have left it intact since I do not know whether it’s possible (I dunno what goals this block has…)
.content {
border: 1px solid green;
text-align: center; /* ADD ME */
position:relative; /* DELETE ME */
}
.block-1-1 {
background: none repeat scroll 0 0 blue;
display: inline-block; /* ADD ME */
width: 100px;
height: 50px;
margin-right: 20px;
position:absolute; /* DELETE ME */
right:50%; /* DELETE ME */
}
.block-1-2 {
background: none repeat scroll 0 0 yellow;
display: inline-block; /* ADD ME */
width: 300px;
height: 50px;
position:absolute; /* DELETE ME */
left:50%; /* DELETE ME */
}
Oops. Ninja’d by Ryan
I believe someone has mentioned to you before that those leading slashes in your CSS are not valid comment marks and they render a portion of that CSS unworkable.
When you say “responsively”, what do you mean? I don’t see any media queries in play. Do you mean “fluid”?
The blocks, -1-1 and -1-2, are set to “inline-block”. A width is optional. By default, they “shrink to fit” whatever is inside. They are centered by virtue of “text-align:center” in their parent.
When using display:inline-block you need to alter the default vertical alignment so remove your bottom margin and use vertical-align:middle instead (see Ron’s example above).
display:inline-block;
vertical-align:middle;
That will align the inline-blocks vertically in respect to other inline-blocks on the same line. It will not verticallly center the blocks in respect to a parent’s height and you would need display:table/table-cell for that (as also seen in Ron’s example above).