Comments on: Vertical alignment of contents inside an element using jQuery

By: Ricardo Zea

Ricardo Zea — Wed, 06 Apr 2011 18:36:42 +0000

Not sure how to make code show up…

By: Ricardo Zea

Ricardo Zea — Wed, 06 Apr 2011 18:35:43 +0000

HTML:

Content to be centered

By: Ricardo Zea

Ricardo Zea — Wed, 06 Apr 2011 18:34:56 +0000

A solution without the need for JavaScript:

CSS:
div { display:table-cell; vertical-align:middle; height:300px; }

HTML:

Content to be centered

Works in every browser except IE6 and IE7… although by this point you should be phasing out support for those browsers, at least.

This script is my backup to the above solution.

Thanks.

By: Gonz

Gonz — Sat, 22 May 2010 01:06:56 +0000

Thanks for this plugin – this really helped – darn the CSS gods for making this a hassle.

By: admin

admin — Tue, 05 Jan 2010 10:25:21 +0000

Hi Matt,

Thanks for visiting my blog and posting comment.
Regarding your question, I think it may be due to the image tag. If you’re calling this method in document.ready(), this may happen. Because, document.ready() triggers when the html is loaded – at that time, the images may not be downloaded fully and hence the function will fail. It will work the second time as the image is already cached in browser.

You may try the following to fix the problem.

If possible, include the width and height attribute to the image tag (May be if you’re using, server side scripts like PHP, it should be possible). Eg:

Try calling the align function on window.load() instead of document.ready(). (Because window.load() will be triggered only after loading all images and full dependencies)
Eg: $(window).load(function(){$(“div.special”).vAlign()});

Hope this helps

By: Matt

Matt — Tue, 05 Jan 2010 03:34:52 +0000

I am having problems with multiple instances of elements calling the plugin.

The first element that uses the plugin will vertically center, but often the elements that follow will not unless I refresh the browser.

I am vertically centering an image in a fixed width div multiple times on a page for a thumbnail gallery. The images vary in height, which is why I can’t use strait css.

Any ideas on how to solve this issue?

By: exeQutor

exeQutor — Tue, 03 Nov 2009 03:47:36 +0000

Nice plugin. Although this looks like a copy/an enhancement based from: http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/

By: Emre GULCAN

Emre GULCAN — Fri, 20 Feb 2009 13:23:13 +0000

thank you for your sharing.
I need a solution like that. I’m using a Css hoverbox image gallery and need align vertically images in a div
I’m trying different solutions for 2 days and now, everything is ok..
thank you again.
Regards from Turkey

By: Chad Kieffer

Chad Kieffer — Tue, 13 Jan 2009 03:05:18 +0000

Thanks for sharing this. I’d just implemented a similar solution. One suggestion, I’d recommend passing the paddingPx as an argument rather than instructing users to change it in the function. Treat it just like you handle the wrapping element, but default to 0, instead of 10.

By: Kyle Simpson

Kyle Simpson — Mon, 12 Jan 2009 16:32:15 +0000

I’m wondering if this same approach could be taken to create a html/css construct for the “valign” that would actually “reflow” (that is, keep the content centered vertically if the container changes size (like a browser resize, more content added, etc)?

There are sites out there which have created some crazy constructs for that, and using a plugin approach like this to artificially create that set of constructs might be really helpful, not just in one-time layouts (like the current plugin) but in fluid layouts which are subject to resize/reflows.

Here’s an example of persistent vertical centering using CSS/html constructs:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html