The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to center these Divs, Centering Divs in CSS
Hornet_ant
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hornet_ant
post Aug 19 2016, 03:01 AM
Post #3





Group: Members
Posts: 2
Joined: 18-August 16
Member No.: 24,638



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Reus
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:12 PM