Vertical Center free WordPress plugin
Description
Vertical Center lets you easily vertically center elements. Features Center an unlimited number of elements independently Specify simple CSS/jQuery selectors to target elements Easy to use admin interface Items are vertical centered immediately after the page has loaded Adds a class to each centered element after it has been centered (useful for CSS transition effects) Fully responsive (automatically updates on resize and orientationchange events) Works on mobile devices Works across all modern browsers (including IE8) Trigger custom ‘verticalcenter’ event to force a recalculation Debounced resize events for added smoothness Check out the Screenshots tab for a gif of the plugin in action. Instructions Navigate to Settings > Vertical Center in the WordPress admin. Enter a selector and an offset for the element(s) you want to center. Add/remove additional elements by clicking the “+ Add More” and “Remove” buttons. Advanced Want to trigger the vertical centering manually? No problem. You can skip entering a selector on the settings page and call the jQuery script yourself using either .initVerticalCenter() or .doVerticalCenter(). The .initVerticalCenter() method sets up the event listeners to recalculate if the window is resized, while the .doVerticalCenter() method directly centers without attaching any events: // Attach events and center. jQuery( ‘.selector’ ).initVerticalCenter(); // Center without attaching events. jQuery( ‘.selector’ ).doVerticalCenter(); Both functions take one optional argument, the offset value (as a number of pixels): jQuery( ‘.selector’ ).initVerticalCenter( offset ); jQuery( ‘.selector’ ).doVerticalCenter( offset ); To offset the calculation by 20 pixels: jQuery( ‘.selector’ ).initVerticalCenter( 20 ); The functions are chainable. My personal favorite way to use this plugin is to inline style=”opacity: 0;” on the elements that I am centering (to guarantee they’ll be transparent when the DOM loads) and then fade them in with something like this: jQuery( ‘.selector’ ).initVerticalCenter().delay( 200 ).fadeTo( ‘slow’, 1 ); Or to achieve the
Features
Cost:
Free
Provider:
Braad Martin
Popularity:
Low
WPMarket

