Centering or aligning divs

Hey Jake,

If you float those left and right images, but not the center image, the center image will still be in normal document flow, meaning it will get pushed around independently from the other two. Try floating all three divs.

When you say they're on the same vertical alignment, does that mean they're all stacked in a column? Or that they're all on the same baseline, in a row? If they're meant to appear in a row float all three divs will bump them up next to each other nicely.

Also, how are you defining the dimensions of the three divs? If you want them to change size in different viewports while holding their layout you'll need to give them responsive units of measurement (%, ems or vh/vw).

Finally, using a flexbox might be a nice option for you, particularly if your'e trying to stack the divs in a column. Check out the flexy goodness.

Brian

For something really simple as centering a div, you don't need flexbox i think. You can do it with a margin 'trick'. Check out this very quick demo:

http://codepen.io/arthur_versch/pen/eFjvH

This way, your div can have a percentage width too.

If you set the display value to 'table-cell', you can use the vertical-align property too.

It sounds like you are trying to get all of the images to line up from left to right on the same line. So I was wondering, why don't you get rid of the 3 containing divs and just have the 3 images within the secondary div? The reason that you have to use float is because a div tag is a block level element so it takes up a whole line by itself, whereas an IMG tag is an inline-block element and they will line up on the same line. Then you can just do text-align: center; on the containing div and they will all move to the center. Unless I'm reading your post wrong.