crazzyyfool Posted February 25, 2010 Share Posted February 25, 2010 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 More sharing options...
0 XakepaBG Posted February 25, 2010 Share Posted February 25, 2010 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 More sharing options...
0 Geoffrey B. Veteran Posted February 25, 2010 Veteran Share Posted February 25, 2010 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 More sharing options...
0 sweetsam Posted February 25, 2010 Share Posted February 25, 2010 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 More sharing options...
Question
crazzyyfool
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