My boss asked me to make same area always stay vertical centered regardless how much text was in the box. I know we tend to cringe when vertical alignment comes up but it sounded like a fun challenge. Since it has plagued me I thought I would throw up this tip/trick to anyone else trying to get the same result. note: I know you can use other elements besides div here. I’m just using div for the example.
Title Shown Here
Text shown. Use multiple lines as you please.
CSS (concept could work with or without a pre-defined height)
var titleHeight = $(‘#title’).height();
var textHeight = $(‘#text’).height();
var containerHeight = $(‘#container’).height();
var dynamicPadding = (containerHeight-(titleHeight + textHeight))/2;