Question

I have two images next to each other in HTML. One image is taller than the other. Images have a vertical-align: middle CSS property. This causes the shorter image to be positioned lower, relative to the parent container, than the taller image.

I use the jQuery .position() method to get the images’ position. The position.top for both images is the same, when clearly the shorter image is offset further towards the bottom because of the vertical-align: middle CSS property.

How can I get the image’s actual position, taking into consideration the vertical difference caused by the vertical-align: middle CSS property?

UPDATE:

The problem happens because I do the following:

1. My HTML is output with the images having no src attributes. They do
   have a width and height, so the browser should not need to wait to
   load the actual image (later step) before calculating its position
2. I set the src attribute of each image
3. I check the position using jQuery. My guess is that the browser (FF
   9.0.1) waits to load the image before updating its position and making it available to JS

I will need to redesign my app so that this does not happen

Answer 1

Try this.

http://jsfiddle.net/cadence96/X54gy/

small = parseInt($('img:eq(0)').css('height'));
big = parseInt($('img:eq(1)').css('height'));

difference = big - small;
top_distance = difference/2;

alert(top_distance);