ie6/7で、強引にdisplay:table-cell;風
画像が並ぶようなコンテンツで、サムネールが以下のように配置される可能性がある場合、
とりあえず、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風です。