jQuery Plugin To Vertically Align Element To Middle of Its Container - valign

valign is a very simple jQuery plugin used to vertically center an Html elements within its container without having to write extra CSS rules for different browsers.

See also:

• jQuery Plugin For Any Element Vertical Centering
• jQuery Plugin To Center An Html Element Responsively - jQuery Center

How to use it:

1. Include the latest version of jQuery library and jQuery valign plugin at the bottom of the page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.valign.js"></script>

2. Wrapper the html element you would like to make it vertically centered in a container.

<div class="wrapper">
<div class="centered">Centered Element</div>
</div>

3. Align the 'centered' div element to the middle of 'wrapper' element by simply calling the plugin like this.

<script type="text/javascript">
$(function() {
$('.centered').valign();
});
</script>

---

This awesome jQuery plugin is developed by cssmonkey. For more Advanced Usages, please check the demo page or visit the official website.