Question

It’s not the first time I’m bumping into this problem and never have the opportunity to figure out something right.

So here’s the problem:

I have 2 divs. Each of them have a title in them. Depending on the length of the title, the title may have to fit on 2 lines or not. All of this is generated from a CMS, so no way of telling if one of them will have 2 lines or one at a given time (so I can’t just separate them with a class if they have 1 line or 2)

Here’s the juicy part: I want the title in those two divs centered vertically. Line height won’t do it because theres always the possibility of it being on 1 or 2 lines, and display:table-cell + vertical-align:middle is not compatible with IE7.

So is there a way to vertically center those titles and that will work in every browser?

Edit: Heres a photo of the situation I try to explain:

Edit #2: Here’s a code sample recreating my example. We want to get them both centered. http://jsfiddle.net/m7bLj/

Edit #3:

After the answer of @mikhailvs, I came up with this code, that worked.

$(document).ready(function(){
    $(".container-div").each(function(){
        $(this).children('div').css('top', String($(this).height() / 2 - $(this).children('div').height() / 2) + 'px');
    })
}) 

Answer 1

If you are willing to use jQuery, you can do something like this:

var div1onLoadCallback = function () {
     var w = $(window);
     var div1 = $('#div1');
     div1.css('top', String(w.height() / 2 - div1.height() / 2) + 'px');
}

Then declare your div like <div id="div1" onload="div1onLoadCallback()"></div>

and similarly for the second div. Of coarse, you would need to modify the css position attribute for the titles for it to work (such as position: absolute).