Printable Version of Topic

Posted by: Hornet_ant Aug 18 2016, 05:35 AM

Hi All,

I'm trying to set up 4 divs side by side, within each of these is a smaller div shape which I would like to centre within the first div. The shape inside is a little complicated as its made up of a couple of divs creating a hexagon shape. I cant seem to get this shape in its entirety to move away from the edge.

I'm using zurb foundation framework
Any help would be greatly appreciated.

Thanks
Ant

Link to code:
http://codepen.io/Hornetant/pen/akrgaN?editors=1010

Posted by: pandy Aug 18 2016, 03:06 PM

Do you mean center both horizontally and vertically?

Posted by: Hornet_ant Aug 19 2016, 03:01 AM

Both if it's possible. but more important to be horizontal.

Posted by: pandy Aug 19 2016, 07:59 AM

But they already are horizontally centered for me. In what browser are they not?

Posted by: Reus Aug 24 2016, 02:45 AM

You can apply this CSS to the inner div:

#inner {
width: 50%;
margin: 0 auto;
}
Of course, you don't have to set the width to 50%. Any width less than the containing div will work. The margin: 0 auto is what does the actual centering.

If you are targeting IE8+, it might be better to have this instead:

#inner {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width.