AlignIt - DOM Alignment Helpers

Align your dom elements to other elements with relative ease. Uses absolute positioning.

Usage is dead simple:

alignit(document.getElementById('test'), 'top right');

You can even get a little tricky with offsetting away from alignment points:

// align the #test object 10px away from the right border
alignit(document.getElementById('test'), 'right-10 middle');

And finally, if you want to align the item against an element other than it's immediate parameter specify a third argument:

// align the test element against the document body
alignit(document.getElementById('test'), 'right middle', document.body);

For a working example, I'd recommend checking out the example.


When using alignit it's worth being aware of the following:

  • An element will need to be visible before you can effectively alignit. This is something I consistently forget and have been caught on multiple occasions trying to align and then show an element only to find that the alignment has failed.