Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Boxes of equal height Re: Boxes of equal height

#118262
Mottie
Member

Hmm actually you just want to center the content inside of the block? Instead of modifying the demos here to act like the [Equalizer](https://github.com/CSS-Tricks/Equalizer) plugin, you can just add this css* to the plugin ([demo](http://jsfiddle.net/Mottie/MkQj3/1/)):

.content-wrap > div:before {
content: ”;
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}

.equalizer-inner {
display: inline-block !important;
vertical-align: middle;
width: 100%;
}

You may not like the `!important` flag in the css. If that’s the case, you can just remove the styling from the `equalizer-inner` in the code at [line 36](https://github.com/CSS-Tricks/Equalizer/blob/master/js/jquery.equalizer.js#L36). So change this:

base.$col.wrapInner(‘‘);

to this:

base.$col.wrapInner(‘‘);

* Note: the css is from Chris’ article on “[Centering in the Unknown](https://css-tricks.com/centering-in-the-unknown/)”