画像が並ぶようなコンテンツで、サムネールが以下のように配置される可能性がある場合、

サンプル

とりあえず、cssでこう書きます。

li  a {
    display: table-cell;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    width: 150px;
}

この場合、FireFox等のモダンブラウザでは横長のサムネールもbox（この場合ではaタグ）内で垂直方向にセンタリングして配置されるのですが、
なんちゃってモダンブラウザのie6/7ではtable-cellが効かないので、横長の方のサムネールが上方にくっついて配置されてしまいます。

ちょくちょくie6/7でも、table-cellを有効に〜みたいな記事は見るんですが、
個人的にあまりうまくいかないので、jQuery使ってこう書きました。

    //ua取得
    var ua = navigator.userAgent;
    
    if(ua.indexOf('IE 6') > -1 || ua.indexOf('IE 7') > -1){
        //サムネールを内包する、a内で、display:table-cell;vertical-align:middle;のように表示する
        $('ul a').each(function(){
            var x = $('img',this).width();
            var y = $('img',this).height();

            var flag = this.nodeName.match(/a/i); //対象ノードがaかどうか判断
            if(flag){
                x += 4; //何故かieはaに内包されている時4px少なく算出する為+4
                y += 4; //何故かieはaに内包されている時4px少なく算出する為+4
            }
            
            if(x > y){
                $(this).css({display:'block'});
                var boxY = $(this).height();
                if(boxY != y){
                    var rePadding = Math.floor((boxY - y) / 2);
                    var reHeight = boxY - rePadding;
                    $(this).css({paddingTop:rePadding+'px',height:reHeight+'px'});
                }else if(flag){
                    $(this).css({display:'inline'});
                }
            }
        });
    }

サムネールの、widthとheightを比べて、widthの方が大きい場合に、親box（この場合はaタグ）のheight - imgのheight /2 をして、aの上paddingにしてます。
更にそのままだと、親boxの高さがおかしくなるので、親boxのheight - 設定した上padding の値を、新たに親boxの高さに設定し直してます。

あと、何故かieはaタグに内包されている時には、imgの高さを4px少なく取得するみたいなので、それぞれ+4してます。
逆に適用する対象がaタグじゃない場合にはちゃんとimgの大きさを算出するみたいです。
よくわからん。

表題の通り、強引にtable-cell風です。

tag

jQuery

js