Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering a web page…again and again.

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #37070
    highlight
    Member

    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:

    Fiddle1

    #98629
    Senff
    Participant

    There 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 item text-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.

    #98630
    Malte
    Participant

    If 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.

    #98651
    highlight
    Member

    Ok. I cleaned things up a bit and now got everything centered except for that blasted .cr-container selector.

    Fiddle2

    It is like it has a margin or padding I can not see. Not sure what I am doing wrong.

    #98652
    highlight
    Member

    Ok. I cleaned things up a bit and now got everything centered except for that blasted .cr-container selector.

    Fiddle2

    It is like it has a margin on

    #98661
    wolfcry911
    Participant

    The .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.

    #98662
    highlight
    Member

    Ok. I think I got it. Thanks.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.