1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

center page

Discussion in 'HTML & Website Design' started by syedmohamed2008, Aug 30, 2009.

  1. #1
    how to center a webpage in all resoution
    SEMrush
     
    syedmohamed2008, Aug 30, 2009 IP
    SEMrush
  2. kmap

    kmap Well-Known Member

    Messages:
    2,215
    Likes Received:
    29
    Best Answers:
    2
    Trophy Points:
    135
    #2
    Inside the body tag

    <div align="center>

    you page code here

    </div>

    Try it

    Regards

    Alex
     
    kmap, Aug 30, 2009 IP
  3. syedmohamed2008

    syedmohamed2008 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks for your reply. its working fine.
     
    syedmohamed2008, Aug 30, 2009 IP
  4. dlb

    dlb Member

    Messages:
    203
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    35
    #4
    The more common method is the following (align="center" isn't valid markup);

    Inside BODY tag

    <div id="wrap">
    *** CONTENT
    </div>
    Code (markup):
    And the CSS;

    #wrap { margin:0 auto; }
    Code (markup):
    The 0 means there is no margin at the top or bottom of your wrap div... Auto sets the left/right margins to automatic which centers the div in the middle of the screen. Finally, remember to set a width in the CSS of '#wrap' and everything will be fine. If you want it to work with IE5/6 add the following CSS;

    body { text-align:center; }
    #wrap { text-align:left; }
    Code (markup):
     
    dlb, Aug 31, 2009 IP
    Stomme poes likes this.
  5. Hemuro

    Hemuro Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    to center a page in the body tag simply use <body style="text-align:center"> or simply do it without inlined styles. wrap the whole page in a table or div and center that with the style="text-align:center". simple.
     
    Hemuro, Aug 31, 2009 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Go ahead and try that.
     
    Stomme poes, Sep 2, 2009 IP
  7. bobjones121806

    bobjones121806 Guest

    Messages:
    1,417
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    <body style="text-align:center">
    seems to not apply to all browsers.
     
    bobjones121806, Sep 2, 2009 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    It doesn't work in ANY browsers except IE5.5 and older. Unless you don't have a doctype, in which case it will also work in IE6 and 7 in Quirks Mode.
     
    Stomme poes, Sep 3, 2009 IP
  9. Hemuro

    Hemuro Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    it works in the latest version of firefox too, and the latest IE. <body style="text-align: center;"> is the standard. Styles in HTML is the most current standard.
     
    Hemuro, Sep 4, 2009 IP
  10. willrs

    willrs Peon

    Messages:
    58
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    The best way to do it using CSS and have no problems with different browsers is:

    Considering a that your width is 850px do:

    position:absolute;
    left:50%;
    top:50%;
    margin-left:-425px;

    margin left need to be width/2. Always negative.
     
    willrs, Sep 4, 2009 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Test.

    Explanation on how to do it properly and why IE is the only buggy browser on the planet who does it incorrectly (not counting ancient versions of modern browsers such as Opera 6 or Nutscrape 4). On IE5.5 and below, text-align: center is the only way to center a block because it doesn't know any better. IE6 and 7, so long as they have a proper Doctype, can use automargins but for backwards compatibility they left the bugs from IE5.5 and older in. I stand corrected that IE doesn't need to be in Quirks Mode to center blocks with text-align, rather it's that in Quirks Mode it cannot use the modern auto-margin method, while with a Doctype it can the same as Modern Browsers. IE 8 acts like a modern browser, and does not obey text-align on a block element.
    Text-align centers inline content.

    willrs example can work most of the time but only if you already know the width of your box. It also takes the block out of the document flow (which might not matter if it's container the entire page).
     
    Stomme poes, Sep 7, 2009 IP