Align image to vertical center when browser is resized
I have a web page with a single image and I want the image to always be centered vertically and so if the browser window is resized to a higher or shorter height, the image will always appear in the center (vertically) of the visible browser window. CSS is prefered but using a table would be fine also.
scrathcyboy
HTML does not adequately provide for vertical centering of an element. You could write javascript to determine the screen resolution, then put in the correct table height and number of <BR> commands to get you to the center of the screen. With CSS, you can use absolute positioning, which other elements can and will overwrite, if you are not careful. The absolute positioning will have to change depending on screen resolution, so once again, you are faced with inserting an absolute position in a <SPAN> or <DIV> tag, and changing that with different screen resolutions. HTML was not designed as a "FULL PAGE" layout language, it is designed much as a word processor is -- process each line as it comes -- therefore the concept of vertical centering on a page is not handled well by it, just as it is not with a word processor.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You can vertically align backgrounds, and such images, but not content, since as mentioned above content should expand as needed downwards. Therefore, if it's a visual element and not content, just put it in the background of a div and use background-position: center; to align it vertically and horizontally.