- This topic is empty.
-
AuthorPosts
-
March 9, 2012 at 3:19 pm #37070highlightMember
I know this is a common problem, but I only seem to find half answers to it. It is hard to find examples of whole pages and how they are centered. I can find little snippets of single elements, but not the whole. I want to center everything on this page. I would love to see a definitive answer to this question once and for all. Please help.
The fiddle:
March 9, 2012 at 3:34 pm #98629SenffParticipantThere is no definitive answer to this, since not all web pages are made the same.
To center a (block-level) item, give it a defined width and
margin:0 auto
To center items IN an item, give the itemtext-align:center;
But to center nested elements, you’ll have to apply these two rules again, nested and all.
And then sometimes you have to make block level elements inline, and vice versa. And listitems are also a bit tricky sometimes.
Also, using positioning (both relative and absolute) can be used to center items….or break them.
It really all depends on the design any layout. In your fiddle, you use elements that are centered alright, but within elements that are not wide enough. For example, #container is 620 but #main_content is 502 — that will never properly center, since the outer one needs to be larger than the inner one.
Unless you use absolute positioning, in this case.
March 9, 2012 at 3:41 pm #98630Historical Forums UserParticipantIf you want to center everything vertically as well as horicontally you can wrap it in a div and give a div the style
#wrapper{position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0;}
If you have to scroll on your site you can put a wrapper around everything with the style of
#wrapper { position: static; margin-left: auto; margin-right: auto; }
.
But please be aware that absolute positioned and fixed elements won’t stick to the parent element.
March 9, 2012 at 5:20 pm #98651highlightMemberOk. I cleaned things up a bit and now got everything centered except for that blasted .cr-container selector.
It is like it has a margin or padding I can not see. Not sure what I am doing wrong.
March 9, 2012 at 5:21 pm #98652highlightMemberOk. I cleaned things up a bit and now got everything centered except for that blasted .cr-container selector.
It is like it has a margin on
March 9, 2012 at 6:05 pm #98661wolfcry911ParticipantThe .cr-container is 600px wide. It is a child of the .main_content which is only 500px wide. It begins at the left edge of its parent and overflows to the right. The fact that the .main_container is 600px has no bearing.
March 9, 2012 at 6:38 pm #98662highlightMemberOk. I think I got it. Thanks.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.