• 0

Need some HTML/CSS help.


Question

Hi,

What is the best way to vertically align an image/swf so it always appears in the vertical centre of a users browser window. I've googled this and it doesn't seem as easy as it should be (or maybe it is and I'm completely missing the point).

Have a look at http://www.westportoflondon.com/newsite/ and you'll see what I need to do.

Thanks, :)

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Hi,

What is the best way to vertically align an image/swf so it always appears in the vertical centre of a users browser window. I've googled this and it doesn't seem as easy as it should be (or maybe it is and I'm completely missing the point).

Have a look at http://www.westportoflondon.com/newsite/ and you'll see what I need to do.

Thanks, :)

assuming the image/swf is of fixed height

you need to make sure the container element fills the whole browser viewport

then make the image/swf positioned at 50% vertically, with a negative margin on top equaling half the image/swf height..

I think something like that should work ;-)

Link to comment
Share on other sites

  • 0

must make the height auto and it will auto margin the top and bottom to make it centered in the middle.

Link to comment
Share on other sites

  • 0

This will work if the height and width are known. Say with is 400px and height is 300px...

html...

<div id="swf"></div>

css...

#swf {
        top: 50%;
        left: 50%;
        display: block;
        position: absolute;       /* Can use position fixed here if you don't want the element to scroll especially lightboxes. But it is not supported by IE6 */
        margin: -150px 0 0 -200px;
}

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.