IE6やIE7で、画像を高さ方向の中央揃えにする方法。

ロゴや商品画像など高さが一定ではない画像の高さを揃える方法です。
確認ブラウザは、ie6~ie9、firefox、Google chormeなどでJavascriptなどは使用せず、CSSのみで対応させています。
この問題は、そもそもie8以降や、firefoxなどでは、普通にdisplay:table-cell;などで対応できるのですが、
IE6、IE7は、この値に対応していないため普通にやると高さを中央揃えにすることができません、長年個人的にもこころ苦しい問題だったのですが、
いろいろ模索していたところ、極力CSSハックを使わずに簡潔?に対応する方法ができたのでご参考になればと思います。

IE6、IE7のシェアは落ち続けていますが、まだしばらくはある一定のシェアが残り続けるもと思われますが、今後もまだしばらくは有効なテクニックではないだろうか?と思われます。

※その他、高さを中央揃えするために検討した方法
[方法1]
JavascriptやPHPなどを使って高さを検出、そこから計算してパディング値で調整
>サーバーにしろ、クライアントにしろある程度の負荷がかかる&計算のための処理が発生し、表示速度へ影響のでる懸念がある。一番高速なのはブラウザのデフォルトの表示機能に頼ることなのであまり好ましくない。
[方法2]
テーブルのセルに入れてしまう。
>最初から、テーブルに入れるべき要素なら問題ないですが、高さの中央揃えのためだけにテーブルを生成するのは、WEB標準的にもパフォーマンス的にも好ましくない。
[方法3]
透明画像や空div要素などの背景に画像をbackground:url() center center;などで配置する。
>画像が設定する要素1つ1つにstyle属性を指定することになるので、WEB標準(表示:CSSと文書構造:HTMLの分離)の考え方から好ましくない。

いずれも、何かしらの問題点を抱えているため決定的とはいえない手法となります。

bug - 『高さ揃えがブラウザによって異なる例』の例

firefoxやie8以降などでは、期待どおり高さが中央になりますが、
displayプロパティのtable-cell値が無視されてしまう、ie6やie7などでは、高さが上揃えになってしまいます。

fix - 『IE6、IE7でも高さ方向の中央揃えを実装した例』の例

この手法のポイントはspanの空要素<span class="vg">にあります。
この手法の発想したキッカケは、高さの異なる画像を2つ並べたときに、高さの高い方を基準に中央揃えをすることはIE6でも可能
 →スペーサー高さを担保すれば画像の高さを方向の中央揃ができるのでは?
 →上手くできたが、スペーサーはソース量も多い、もっとカンタンな方法は?
 →空spanタグはどうだろうか?
といった経過で効率化していった結果、行き着いた手法になります。

モダンブラウザ(IE8以降、Firefox、Google Chorme)などでは、displayプロパティのtable-cell値が有効なので
表示をテーブルセル化することでvertical-alignを有効化できます。
ところがIE6やIE7の場合は、table-cell値はサポートされていないため、無視されてしまいます。
そのため、空<span>要素で高さを担保し、それを基準に高さをブラウザに認識させ、高さの中央揃えさせることができます。

欠点は空要素を指定しなければいけないことですが、その他手法に比べて手軽&HTML本来の表示方法に近いので妥当な方法だと言えるのではないでしょうか?

また、同じプロパティが2回連続している箇所がありますが
dispaly: block;
display: table-cell;
サポートしていない値が指定されても、ブラウザは基本無視(デフォルト値)になりますので、
これによりCSSハックなどでワザワザ分岐させる必要はありません。

もう少し詰めれば、まだ効率化できそうな気はしますが、とりあえずある程度実践的に使えるのでは?ないかと思います。

バグに対応したコード例

CSS

#vertical-align .items{
width: 100%;
overflow: hidden;
}
#vertical-align .item{
float: left;
width: 110px;
height: 110px;
margin-right: 12px;
background: #dfdfdf;
text-align: center;      /* 水平方向の中央揃えに使用 */
}
#vertical-align .item a{
dispaly: block;          /* IE6/IE7はblock要素の必要があるので */
display: table-cell;     /* サポートしていないブラウザ(ie6/ie7)では無視 */
width: 110px;            /* マウスのクリックエリア */
height: 110px;           /* マウスのクリックエリア */
vertical-align: middle;  /* モダンブラウザでの高さ中央揃えに使用 */
zoom: 1;                 /* IE6/IE7でクリッカブル領域を担保するために指定 */
}
#vertical-align .item a img{
vertical-align: middle;  /* IE6/7の高さ中央揃えに使用 */
}
#vertical-align .vg{     /* このクラスを指定する要素はinline要素である必要があります。 */
visibility: hidden;      /* 表示させる必要はないですが、高さの影響を出したいのでvisibilityで非表示化 */
height: 110px;           /* 基準となる高さを指定します。 */
vertical-align: middle;  /* IE6/7の高さ中央揃えに使用 */
zoom: 1;                 /* haslayoutをinline要素のまま持たせるのがポイント */
}

HTML

<div id="vertical-align">
<ul class="items">
<li class="item"><a href="#"><img src="http://nekodama.sakura.ne.jp/images/cat200/c1.jpg" width="110" height="110" alt=""><span class="vg"></span></a></li>
<li class="item"><a href="#"><img src="http://nekodama.sakura.ne.jp/images/cat200/c2.jpg" width="50" height="50" alt=""><span class="vg"></span></a></li>
<li class="item"><a href="#"><img src="http://nekodama.sakura.ne.jp/images/cat200/c3.jpg" width="110" height="80" alt=""><span class="vg"></span></a></li>
<li class="item"><a href="#"><img src="http://nekodama.sakura.ne.jp/images/cat200/c4.jpg" width="60" height="30" alt=""><span class="vg"></span></a></li>
<li class="item"><a href="#"><img src="http://nekodama.sakura.ne.jp/images/cat200/c5.jpg" width="110" height="40" alt=""><span class="vg"></span></a></li>
</ul>
</div>