Help - Search - Members - Calendar
Full Version: How to center these Divs
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Hornet_ant
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
pandy
Do you mean center both horizontally and vertically?
Hornet_ant
QUOTE(pandy @ Aug 18 2016, 09:06 PM) *

Do you mean center both horizontally and vertically?



Both if it's possible. but more important to be horizontal.
pandy
But they already are horizontally centered for me. In what browser are they not?
Reus
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.