Centering div on an image

Question

Centering div on an image

Navigation

#1 by (2 votes)

1

In a project I have an image that when the mouse is at the top starts an effect on a div that is over the image, my problem is that often the div is not centered, because the image has a dynamic size , and I have no more ideas on how to fix this. I currently use the following script to center the div on the image:

$('.overlay img').each(function() {
  $(this).load(function() {
    var image;
    image = $(this).parent().find('.centralize');
    image.css('marginTop', (image.parent().height() - image.height()) / 2);
  });
});

However, as I said earlier, it often does not work and does not center the image ...

Test site for a better understanding of the problem: link

javascript jquery

asked by anonymous 08.02.2016 / 12:23

1 answer

Duplicate value in the bank when inserting new users with an already used Role (Spring-Security) Block 'body scroll' when the LightBox is open, but you can scroll the contents of the LightBox

score 2 · Accepted Answer

Well at first I accessed your link and did not see anything wrong (was using Chrome) hence I went and tested it by IE 11 and saw what was saying that the text inside the DIV in the areas of projects tend to stay on top sometimes times, not times.

At first I thought I'd tell you that the ideal thing was to put this function you created into the "onMouse" event so that the user puts the mouse on top to do the position adjustment, because sometimes the browser can only have the actual dimension of the elements after loading the elements just as the user would only by the mouse as soon as loaded, but looking fast you are using a library called "overlay" that is well compressed and I thought it would be a childbirth open it.

Then I thought that the load time was interfering with the positioning of the elements, and debugging it, I saw that its function was not being called either before or after loading (at least in IE). I calmly realized that you are using the JQuery .load function, but in my view this function does not in this context, the load function is to load an (or something else) from the server and put it in the indicated element, it would be an Ajax request type, but in your case the elements of your page already loaded it does not have what, nor where to pull since it works only with URLs, so it was giving error and did not read the rest of the function.

I mean, I just took this little bit and it worked IE 11, FF 44+ and Chrome 48+, at least in my quick tests on the owl (haha), so try replacing the your current role for the clean version and try again:

$('.overlay img').each(function() {
 var image;
 image = $(this).parent().find('.centralize');
 image.css('marginTop', (image.parent().height() - image.height()) / 2);
});