Skip to content

jQuery plugin to vertically center an element in a container with a variable height even in a responsive layout

Notifications You must be signed in to change notification settings

smockensturm/jQuery-Flex-Vertical-Center

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 

Repository files navigation

jQuery Flex Vertical Center

This jQuery plugin provides an easy way to vertically center an element in its parent. Even if the parents height changes after resizing the browser window, in a fluid or responsive layout for example.

Usage

Simply include this file in your project (after loading jQuery) like this:

<script defer src="js/jquery.flexverticalcenter.js"></script>

Then call the plugin on the element which needs to be vertically centered in it's parent.

  <script>
  $(document).ready(function() {
    $('#element-to-be-centered').flexVerticalCenter();
  });
  </script>

This will take the parents height, the elements own height and calculate the distance the element should have from the parents top to be vertically centered. This value is applied to the top margin of the element by default.

Options

You can pass an options hash to the plugin.

  • cssAttribute - the css attribute that the value should be set on (default: 'margin-top')
  • verticalOffset - the number of pixels to offset the vertical alignment by, ie. 10, "50px", -100 (default: 0)
  • parentSelector - a selector representing the parent to vertically center this element within, ie. ".parent" (default: the element's immediate parent)
  • debounceTimeout - in milliseconds, used to rate-limit the vertical centering when resizing the browser window (default: 25)
  • deferTilWindowLoad - if true, no action will be taken until jQuery's window.load event fires. If false, the vertical centering will take place immediately, and then once again on window.load (default: false)
  • complete - takes an anonymous function that gets run after the centering is complete.

Examples:

  <script>
  $(document).ready(function() {
    $('#element-to-be-centered').flexVerticalCenter();
    $('#element-to-be-centered').flexVerticalCenter({ cssAttribute: 'padding-top', verticalOffset: '50px' });
    $('#element-to-be-centered').flexVerticalCenter({ cssAttribute: 'padding-top', parentSelector: '.parent' });
    $('#element-to-be-centered').flexVerticalCenter({ cssAttribute: 'padding-top', parentSelector: '.parent', complete: function(){ alert('I'm in the middle.... Vertically') } });
  });
  </script>

Non-jQuery version

Matthew Nessworthy has made a vanilla javascript version of this plugin. Great if you don't need or want to use jQuery: https://github.com/devmatt/js-flex-vertical-align

Note

The initial code was more or less borrowed from the awesome FitText plugin. http://fittextjs.com/

About

jQuery plugin to vertically center an element in a container with a variable height even in a responsive layout

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 51.1%
  • HTML 48.9%