How to center......

Discussion in 'CSS' started by ChanceXx, Sep 22, 2008.

0
  1. #1
    an image at the top of a myspace, above the navbar.
    i have the photo up there and its perfectly in the middle for me.
    the problem is the screen resolutions on other computers,
    cause the image to move more to the left or to the right.
    so if anyone knows how to completely center an image for all resolutions.
    that would help me BIG time.
     
    ChanceXx, Sep 22, 2008 IP
  2. AnonymousUser

    AnonymousUser Peon

    Messages:
    593
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try this

    <img class="YOURCLASS" src="YOURIMAGE"/>

    . YOURCLASS {
    display:block;
    margin-left:auto;
    margin-right:auto;
    }

    Let me know, It should work
     
    AnonymousUser, Sep 22, 2008 IP
  3. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Use:

    .YOURCLASS {
    display: block;
    margin: 0 auto;
    }

    Just to make things smaller and cleaner.
     
    rikun, Sep 22, 2008 IP
  4. AnonymousUser

    AnonymousUser Peon

    Messages:
    593
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    or:

    .Y {
    display: block;
    margin: 0 auto;
    }

    To make it even smaller and cleaner.
    j/k

    Nice 1, I havnt tried that before, but wouldnt it align the image by the top and bottom of the page now? there for it will appear like the image is padded from the top and bottom?
     
    AnonymousUser, Sep 22, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    No, the first number refers to top-bottom, while the "auto" refers to the sides.

    CSS shorthand (for margins, padding, borders, etc):

    1 2 3 4 =
    top right bottom left

    1 2 3 =
    top sides bottom

    1 2 =
    top-bottom, sides

    1
    all four sides

    Be aware that while the codes above may center the image because it has an intrinsic width, I find at least a few browsers (if not all of them) really want the width in the CSS as well (if you are centering using the display: block and automargins technique).

    Blocks in general needs widths for automargins to work. If the image centers without the width, bonus.

    If the width is unknown (and especially if it's not listed in the HTML as it should be) OR if the width changes because it's a generated image and they can all be different widths and things, the safer route then is
    text-align: center;
    on the parent of the image. I don't think you can stick it on the image itself. if the image is in a block like a p, then the p needs the declaration.
     
    Stomme poes, Sep 23, 2008 IP