How to center these Divs, Centering Divs in CSS |
How to center these Divs, Centering Divs in CSS |
Hornet_ant |
Aug 18 2016, 05:35 AM
Post
#1
|
Group: Members Posts: 2 Joined: 18-August 16 Member No.: 24,638 |
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 |
Aug 18 2016, 03:06 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Do you mean center both horizontally and vertically?
|
Hornet_ant |
Aug 19 2016, 03:01 AM
Post
#3
|
Group: Members Posts: 2 Joined: 18-August 16 Member No.: 24,638 |
|
pandy |
Aug 19 2016, 07:59 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
But they already are horizontally centered for me. In what browser are they not?
|
Reus |
Aug 24 2016, 02:45 AM
Post
#5
|
Group: Members Posts: 3 Joined: 23-August 16 Member No.: 24,691 |
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. |
Lo-Fi Version | Time is now: 28th March 2024 - 05:12 PM |