How to center two divs when they move / stack under one another? - css

Question

Note that yes there are similar questions here, but I tried what they have mentioned as solutions, and I still can't get my items centered. I have stuck text-align: center, display:inline-block; margin: 0 auto and width: 100% in multiple places and I still can't get the items to display centered.
O.k. With that out of the way, here is the code and then the explanation below:
<h4 style="margin-bottom:-15px"><strong>The Item Item Below:</strong></h4>
<img style="float:left;width:100%; max-width: 408px; height:100%; max-height: 134px; background-color:red; margin-top:40px; margin-right:20px"
src="http://s25.postimg.org/kbrcsousf/408x134.png"> <span style="float:left; margin:0 auto; max-width:100%">
<p style="text-align:center; text-decoration: underline"><strong> Works
with these Things:</strong></p>
<div style="float:left;max-width:100%; width:160px;text-align:center;margin-right:20px;margin-bottom:20px">
<div style="background-color: rgb(255, 0, 255);"><span style="text-decoration: underline;"><strong>Flowers
A<br>
</strong></span></div>
<div style="background-color: rgb(0, 255, 255);"><img src="http://s25.postimg.org/i8gxl0uzf/140x124.png"></div>
</div>
<div style="float:left;max-width:100%; width:230px;text-align:center;">
<div style="background-color: rgb(255, 0, 255);"><span style="text-decoration: underline;"><strong>Flowers
B<br>
</strong></span></div>
<div style="background-color: rgb(255, 255, 0);"><img src="http://s25.postimg.org/a48tga8kf/209x112.png"></div>
</div>
</span>
Now the explanation:
So, I first started out with the first image on a line by itself and then had the bottom two pairs of divs below it. I figured I was wasting a bit too much horizontal space, so I placed the two pairs of divs next to / to the right of the "408x134" image by placing float:left in that image and enclosing the two pairs of divs with a span tag and placing float:left in it.
I am designing this with responsiveness / mobile in mind and am trying to avoid using #media for now.
So, when one reduces the size of their screen on their browser horizontally, the two items to the right drop down as a pair below the "408x134" image, which is what I want. As the screen gets even smaller, the two items below get separated, with the "209 x 112" image going underneath the "140 x 124" image. (Well, that and the div label above each one of them).
This is what I want. However, the final part I can't get is that I want those two pairs of divs to be centered. How can I do that? If you can give an explanation of your solution also, that would be great, so that I can finally understand how to fix this problem in the future or avoid it in the first place. Now I realize that the first pair of divs -- Flowers A and "140 x 124" won't be exactly centered as I have placed a right margin, and that is so that there can be some space when they are next to one another horizontally and also under one another when they are stacked on a smaller screen. For that to be centered I think I will have to use #media tags to remove/resize the margin and add a line break or another div or something.

Answer 1

Try the code below:
<h4 style="margin-bottom:-15px"><strong>The Item Item Below:</strong></h4>
<img style="float:left;width:100%; max-width: 408px; height:100%; max-height: 134px; background-color:red; margin-top:40px; margin-right:20px"
src="http://s25.postimg.org/kbrcsousf/408x134.png"> <span style="float:left; margin:0 auto; max-width:100%">
<p style="text-align:center; text-decoration: underline"><strong> Works
with these Things:</strong></p>
<center>
<div style="margin: 0 auto;display:inline-block;max-width:100%; width:160px;text-align:center;margin-right:20px;">
<div style="background-color: rgb(255, 0, 255);"><span style="text-decoration: underline;"><strong>Flowers
A<br>
</strong></span></div>
<div style="background-color: rgb(0, 255, 255);"><img src="http://s25.postimg.org/i8gxl0uzf/140x124.png"></div>
</div>
<div style="margin: 0 auto; display:inline-block;max-width:100%; width:230px;text-align:center;">
<div style="background-color: rgb(255, 0, 255);"><span style="text-decoration: underline;"><strong>Flowers
B<br>
</strong></span></div>
<div style="background-color: rgb(255, 255, 0);"><img src="http://s25.postimg.org/a48tga8kf/209x112.png"></div>
</div>
</span>
</center>

Answer 2

I've tried looking at your HTML and I think you're missing a few tags. Additionally, best practice is to not have CSS styles inline with HTML; you typically want to have CSS in a separate stylesheet. Getting past all that, I think you need to know some things about the elements and properties you are working with.
A div is block-level element by default, which takes up 100% width of its container (parent) unless you add some other overriding style to it. One option (which you've selected) is float:left; which will get this element to act sort of like an inline element (like a span or img) except it will always try to align itself with the left of the container; no matter the type of alignment you've set to the container.
What I will recommend in your case is setting the image container div elements to display:inline-block; instead of float:left;, that way it will be affected by a parent's text-align:center; property and when there's no room for all of the div elements to be in a row, they will fall down underneath but be aligned in the middle. You don't currently seem to have a container element but your setup should probably look something like this:
#container{
text-align:center;
}
#container .imgwrap{
display:inline-block;
}
<div id="container">
<div class="imgwrap"><img src="#"/></div>
<div class="imgwrap"><img src="#"/></div>
<div class="imgwrap"><img src="#"/></div>
</div>

Answer 3

My off the cuff: divs in my limited experience defeat the point of css. Second, there is script to detect screen size and allow u to provide separate css based on that. Thats how I've played it.