Grow your CSS skills. Land your dream job.

Centering verticaly an image with position:absolute; top:0; bottom:0;margin:auto

  • # March 26, 2012 at 2:27 pm

    Does anyone know how can I make this work in ie7 without setting a height on the image?

    # March 26, 2012 at 4:57 pm

    Why did you give it an absolute position? It should be margin: 0 auto;

    # March 26, 2012 at 6:50 pm

    There are two main options for vertically centering an element of unknown height with CSS, neither of which work in IE7 (using a pseudo-element, or using display: table. See here for more information: http://css-tricks.com/centering-in-the-unknown/). Your best bet would be to use JavaScript. Here is a jQuery solution, although someone that can do it in JavaScript should be able to come up with something better: http://jsfiddle.net/joshnh/zGw9s/

    # March 27, 2012 at 1:58 am

    @ChristopherBurton
    margin: 0 auto; is for horizontal centering, I’m interested in both vertical and horizontal centering.The above mentioned method works with the major browsers, but fails in ie7.Of course it works only with widthless, hightless images and probably tables to(their heights are calculated), but not with widthless-hightless p, div tags.

    @joshuanhibbert
    Thank you, so I need to set an alternative method for ie7.

    # March 27, 2012 at 2:35 am

    The jQuery solution I posted should work fine in IE7.

    # March 27, 2012 at 2:36 am

    Thx, but I’m trying to do it only with css.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".