Simple jQuery plugin for Vertically Centering

Came across this while needing to vertically center a div within another div:

1
2
3
4
5
6
7
8
9
10
11
(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
    return this.each(function(i){
    var ah = $(this).height();
    var ph = $(this).parent().height();
    var mh = Math.ceil((ph-ah) / 2);
    $(this).css('margin-top', mh);
    });
};
})(jQuery);

Then you can use $(‘.classname’).vAlign(); or $(‘#image’).vAlign(); – Make sure to use this once the document has loaded, within $(document).ready(function(){})!

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
No comments yet.

Leave a Reply