The following may sound familiar: you have a row of floating divs with varying heights and want to align them neither top nor bottom – but vertically centered? In the good old days of table-layouts that was easy. You would just throw the divs in one table cell each and tell that cell to display its content valign=”middle”.
But in times with mostly CSS powered design that might sound a little bit difficult. But ‘table’ is the right keyword here: you can use a containing outer div (container / parent object) with the behavior ‘table row’ and give the contained inner divs (child objects) the behavior ‘table-cell’ – then you can apply the css property vertical-align: middle – and Bob’s your uncle.
Here’s a jsfilddle with a working example:
And this question-answer-post at brought me to the above fiddle:
“How to center vertically a floating div inside an inline-block?”