Centering Elements Vertically with jQuery - centerEl
File Size: | 10.3 KB |
---|---|
Views Total: | 543 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

centerEl is a lightweight jQuery solution to center multiple block elements vertically inside their parent container. Check out this article If you're looking for a pure CSS solution to vertically align an block element.
See also:
- jQuery Plugin To Center An Html Element Responsively - jQuery Center
- jQuery Plugin For Any Element Vertical Centering
- Center An Element Horizontally and Vertically with jQuery V-ACenter Plugin
How to use it:
1. Include the jQuery centerEl plugin after you have jQuery installed.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="src/jquery.centerEl.js"></script>
2. Call the plugin on the block element and specify the parent element.
$("#element").centerEls({ absolutePositioning: true, parentEl: "#parent-element", });
3. Default plugin settings.
$("#element").centerEls({ additonalOffset: 0, absolutePositioning: 0, left : 0, right :0, bottom : 0, parentEl: "", });
4. Methods.
// Recalculate the element's height // Useful for responsive layout $("#element").data("plugin_centerEls").recalc(); // Destroy the plugin $("#element").data("plugin_centerEls").destroy(); // Initialize the plugin $("#element").data("plugin_centerEls").init();
This awesome jQuery plugin is developed by mohandere. For more Advanced Usages, please check the demo page or visit the official website.