Download Manipulate Alignment Of DOM Element Using jQuery – Centify

This time I will share jQuery Plugin and tutorial about Manipulate Alignment Of DOM Element Using jQuery – Centify, hope it will help you in programming stack.

File Size:	3.41 KB
Views Total:	540
Last Update:	3 years ago
Publish Date:	3 years ago
Official Website:	Go to website
License:	MIT

Demo Download

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.

1
<script src="https://code.jquery.com/jquery-1.12.4.min.js"

2
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"

3
        crossorigin="anonymous">

4
</script>

5
<script src="centify.js"></script>

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

1
<div class="demo">

2
  Example

3
</div>

1
$(function(){

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

4
 
5
});

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

1
<div class="demo">

2
  Example

3
</div>

1
$(".demo").centify({

2
 
3
  // or 'left', 'right'

4
  align_element_x: "center",

5
 
6
  // or 'left', 'right'

7
  align_element_y: "center"

8
   
9
});

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

1
$(".demo").centify({

2
 
3
  // or 'left', 'right'

4
  align_text_x : "center",

5
 
6
  // or 'left', 'right'

7
  align_text_y : "center"

8
   
9
});

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

source : jquery.net

How to use it:

Share this:

Related posts: