Responsive Element Centering Plugin With jQuery - Centerr.js

File Size: 3.76 KB
Views Total: 726
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Element Centering Plugin With jQuery - Centerr.js

Centerr.js is a lightweight jQuery plugin which responsively makes any element always be centered within its parent container and has the ability to auto disable the 'centering' behavior on the small screens like mobile devices.

How to use it:

1. To use this plugin, simply include a reference to the jQuery and Centerr.js JavaScript files like this:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.centerr.js"></script>

2. Call the function on window resize and load events and specify the target element to be centered.

$(window).on("load resize",function(){
  $('.block').centerr();
});

3. Specify the mobile breakpoint to disable the plugin on mobile device where the screen size is smaller than 767px.

$(window).on("load resize",function(){
  $('.block').centerr({
    mobile:   767,
  });
});

4. Set the 'fullWidth' to 'true' so the plugin don't bother setting a value for margin-left.

$(window).on("load resize",function(){
  $('.block').centerr({
    mobile:   767,
    fullWidth:  true
  });
});

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