This lesson, I’ll show you how you can vertically center elements or images by using just a bit of jQuery (javascript library).

To Download this youtube video, Click Here

Text Content:

This video is to show how to vertically center an element using jQuery library.

Horizontal centering can be achieved easily by specifying margins to “auto” in CSS.

The img tag and the script tag (jQuery reference) are added to the plain HTML page. Now, the image will not be centered anyway.

To code with jQuery, first start with standard <script type=”text/javascript”> tag.

Then enter the following code within the script tag:

$(document).ready(function(){
var height = $(document).height();
var imageHeight = $(”img”).height();
console.log(imageHeight);
});

The console.log statement has been used to get the image height during debugging session.

Now, the CSS of the image is going to be edited.

Replace the console.log statement with the following:

$(”img”).css({”position” : “relative”; “top” : height/2 – imageHeight/2});

Now, the image is centered vertically in the page.

In this way, multiple values of image properties in CSS can be specified with a single $ in jQuery – (to include the properties within curly braces)

A single CSS property can be set like this:  $(”img”).css(”position” : “relative”);