Manipulate Alignment Of DOM Element Using jQuery - Centify

Centify is a simple, cross-browser jQuery plugin used to manipulate the vertical and horizontal alignment of text or DOM elements inside a given container.

The typical use of the plugin is to horizontally and/or vertically center an element relative to its parent container. Heavily based on the CSS position: absolute attribute.

How to use it:

1. Download and put the JavaScript file centify.js after the latest jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="centify.js"></script>

2. Call the function to make an element always be center inside its parent container.

<div class="demo">
  Example
</div>

$(function(){

  $(".demo").centify();

});

3. Adjust the horizontal and vertical alignment of the element.

<div class="demo">
  Example
</div>

$(".demo").centify({

  // or 'left', 'right'
  align_element_x: "center",

  // or 'left', 'right'
  align_element_y: "center"
  
});

4. The plugin also alllows you to set the horizontal and vertical alignment of the text inside a given element.

$(".demo").centify({

  // or 'left', 'right'
  align_text_x : "center",

  // or 'left', 'right'
  align_text_y : "center"
  
});

---

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