jQuery Vertically Center Content

[chrisburton]

I used a script that dynamically centers my content that @joshuanhibbert suggested however, I did something that made it stop working and I’m completely lost. See both links

Link 1
Link 2

jQuery

[joshuanhibbert]

Moving the script to the bottom of the document (just before the closing body tag) should fix the issue. From my limited understanding, it is running the script before the image element has been drawn, and that is what is causing the issue (which is why the margin top and left values are 0, as the image has no height or width until it has been drawn).

EDIT: The other thing that should fix it would be to wrap the jQuery in the following:

$(document).ready( function() {



});

This would stop the code from running until the page is loaded, but I believe placing scripts at the bottom of the document is best for page load times.

[chrisburton]

@joshuanhibbert So essentially put it before the closing body tag? That didn’t make a difference

[joshuanhibbert]

Hmm, I’m not entirely sure when it comes to JavaScript stuff, but does wrapping it in the document ready function above work?

[chrisburton]

@joshuanhibbert Nope. If you check developer tools, I think I’m getting an error

[Taufik Nurrohman]

$(document).ready( function() {

var $img = $('img');

$img.css({

'display': 'block',

'position': 'absolute',

'top': $(window).height()/2,

'left': $(window).width()/2,

'margin-left': '-' + ($img.width() / 2) + 'px',

'margin-top': '-' + ($img.height() / 2) + 'px'

});

});

Edit: I just missed the quotes

[chrisburton]

@Hompimpa Thanks but for some reason that didn’t work for me either.

[joshuanhibbert]

@ChristopherBurton How about if you use a slightly older version of jQuery?

Whatever it is, it’s very strange. I’m not having any issues on my end, but can see that your version isn’t working. Mind using my code again so that I can see if the console shows any errors?

[chrisburton]

@joshuanhibbert No problem. It’s all yours.

[chrisburton]

@joshuanhibbert So I think the issue is on my end because I’m using dual monitors. When I drag my browser window into the the other monitor, it starts to center. But the height is still slightly off.

[joshuanhibbert]

I’m getting the problem on my end too, both on my work and personal machines. The jQuery still seems to be @Hompimpa’s code, or did you change it back?

[chrisburton]

@joshuanhibbert I changed it back. Try clearing your cache.

[chrisburton]

Answer: http://stackoverflow.com/a/10691990/938664

[joshuanhibbert]

Right, glad you have it sorted, and to know that I was on the right track!

[chrisburton]

I’m quite relieved that I stepped away from web design. Coding is not my forté. Appreciate the help.

[Author]

Posts