Vertical alignment of contents inside an element using jQuery

One of the old problems! Vertical alignment of contents inside an element. For those who don’t know about this issue,

What is the issue?

• For eg; there is an area (e.g. <div> or <p>) with known height in the page (For eg: 300px;)
• an internal object (typically a paragraph, image etc) is inside the area and the height is unknown(May be this content is from a table – we don’t know how much is the text)
• This object should be centered vertically inside the required area.
• Tables should not be used.

Though there is a CSS property vertical-align, it won’t work like attribute valign in HTML tables. CSS property vertical-align doesn’t seem to be able to solve this vertical alignment problem.

There were ofcourse a couple of solutions using css. But all involves elements inside an element (For eg: <div>inside another <div> and style). But this may be difficult for bloggers, who want to show some content in special formatting (For eg: In my site, notes are shown in a special style). For eg: you want to give a 200px height to a <p> element and vertically center the elements (Same was the case with mine).

So the simplest method is to use javascript. Here I am describing how to solve the vertical alignment issue with jQuery. Read more