pal

palalalex

Plugin simple to use, it allows you to position an element according to the DOM or a parent element.

Showing:

Popularity

Downloads/wk

2

Maintenance

No Maintenance Data Available

Package

Dependencies

0

Size (min+gzip)

0.3KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

ElementCenter.js

Help you to center an element in the DOM

Plugin simple to use, it allows you to position an element according to the DOM or a parent element.

Installation

Fast installation with bower

bower install ElementCenter --save

Classic installation

  • Import jQuery into your project
  • Add jquery.ecenter.min.js or jquery.ecenter.js in your project that finds it in the folder dist
<script type="text/javascript" src="dist/jquery.ecenter.min.js"></script>

or

<script type="text/javascript" src="dist/jquery.ecenter.js"></script>

Using the plugin

Simple method :

To center an element in the middle of the screen simply call the plugin following the selector to center.

$('p').ecenter();

You will need to add a size in width on this element

Method with option :

You can add 2 options to the plugin

  • position 'Default is fixed'
  • selector 'Default is window'

Position :

Change the position if you want to center one element in another. The default position is fixed, it is possible to add the relative position or absolute.

position relative :
$('p').ecenter({
  position: 'relative'
});
position absolute :
$('p').ecenter({
  position: 'absolute'
});

Selector :

The selector will allow the element to center inside to select. The selector may be a class, ID or tag

Selector class :
$('p').ecenter({
  selector: '.class'
});
Selector ID :
$('p').ecenter({
  selector: '#id'
});
Selector tag :
$('p').ecenter({
  selector: 'tag'
});

If a selector is added, it is also necessary to modify the position in relative or absolute

To center an element in another

Center in relative position :

$('p').ecenter({
  position: 'relative',
  selector: 'tag'
});

Center in absolute position :

$('p').ecenter({
  position: 'absolute',
  selector: 'tag'
});

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100