This time I will share jQuery Plugin and tutorial about jQuery Plugin To Centralize DOM Elements In Parent Container – center.js, hope it will help you in programming stack.
Just another jQuery ‘center align’ plugin used to vertically and/or horizontally centralize an HTML DOM element in its parent container. The plugin works on any responsive web layout so the DOM element will always stay centered even when you resize the browser window.
Basic usage:
1. Be sure you have jQuery library and the jQuery center.js script included in the html page.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="center.js"></script> |
2. Center a single element around its parent.
1 |
<div class="center" data-center data-box> |
2 |
<div data-center data-box> |
3 |
Vertical and Horizontal center alignment |
3. Center multiple elements vertically
01 |
<div class="mvcenter" data-box> |
02 |
<div data-mvcenter data-box> |
05 |
<div data-mvcenter data-box> |
08 |
<div data-mvcenter data-box> |
4. All Html5 data attributes.
- data-center: center a single element vertically and horizontally
- data-vcenter: center a single element vertically
- data-hcenter: center a single element hotizontally
- data-mvcenter: center multiple elements vertically
- data-mhcenter: center multiple elements horizontally
This awesome jQuery plugin is developed by makasanas. For more Advanced Usages, please check the demo page or visit the official website.
