jQuery Plugin To Vertically Align Element To Middle of Its Container - valign
File Size: | 2.54 KB |
---|---|
Views Total: | 2020 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.