SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    aligning div to centre css2 valid

    hi guys
    just wanted to find out if anyone knows how to align a div tag to center and maintain xhtml1.1 and css2 validity
    div align is not xhtml valid
    and align: center is not css2 valid
    this is what i have

    .big {
    position: absolute;
    visibility: visible;
    z-index: 1;
    height: auto;
    width: auto;
    left: 50px;
    top: 50px;
    right: 50px;
    bottom: 50px;
    }

    thanks guys

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    text-align: center;
    However, this will do exactly as it says - namely, align the text in your <div> to the center. It has the side effect of centering any other elements in that <div>, but is not correct in the spirit of CSS and XHTML. If you want a <div> in the center of your page, use this:
    Code:
    margin-left: auto;
    margin-right: auto;
    Hope this helps!

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi thanks for your reply
    i tried margin-left: auto
    but it doesn't do anything
    text-align works and validates
    i see your point as to the spirit of css and xhtml
    as it is aligning more than just text
    i have text and an image, so it's halfway there

    if you have any other suggestions feel free
    to post them as well
    thanks again

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately IE5/Win won't use margin-left: auto; margin-right: auto as it should and requires the text-align: center; as a workaround.

    The text-alignment simply needs to be reset in the next/subsequent elements.

    More info:
    http://www.sitepointforums.com/showt...hreadid=108504
    http://bluerobot.com/web/css/center1.html

    p.s. Fwiw, margin-left: auto will not center block elements (such as divs) on its own.
    You need to use both margin-left: auto; and margin-right: auto; to balance things out.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dtra
    hi thanks for your reply
    i tried margin-left: auto
    but it doesn't do anything
    text-align works and validates
    i see your point as to the spirit of css and xhtml
    as it is aligning more than just text
    i have text and an image, so it's halfway there
    Like Bill said, you have to set margin-left AND margin-right to auto in order to achieve the centered effect. Another reason it may not work is if you're using IE5.

  6. #6
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about the left:50% and negative margin left way?
    Code:
    #Content {
    position:relative;
    width:500px;
    padding:15px;
    border:1px dashed #333;
    left:50%;
    margin-left:-250px;
    }
    it validates, what about support of older browsers for this? Any disadvantages?

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    The negative-margin hack works for IE5 and up, and just about any other standards-compliant browser. However, margin: auto or text-align: center just make more sense to humans reading your code.

  8. #8
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah i was using margin-right as well
    just didn't type that
    and i don't use old browser versions

    thanks

  9. #9
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    The negative-margin hack works for IE5 and up...
    If only it was that clear cut.

    http://www.sitepointforums.com/showt...?postid=711765

    I'm *still* hoping someone will step in with a solution that will get the triumvirate of the negative-margin kludge, IE5/Mac and compliant DTDs (in particular XHTML 1.0 Strict) to live and work happily together.

    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •