異なるサイズの画像を縦横中央配置にしてリスト状に並べるサンプル(IE準拠モード)の紹介

HTMLソース

<div class="vCenter"> <ul> <li> <!--[if gte IE 6]><span></span><![endif]--> <p> <img src="sample01.gif" alt="" /> </p> </li> <li> <!--[if gte IE 6]><span></span><![endif]--> <p> <img src="sample02.gif" alt="" /> </p> </li> <li> <!--[if gte IE 6]><span></span><![endif]--> <p> <img src="sample03.gif" alt="" /> </p> </li> <li> <!--[if gte IE 6]><span></span><![endif]--> <p> <img src="sample02.gif" alt="" /> </p> </li> <li> <!--[if gte IE 6]><span></span><![endif]--> <p> <img src="sample03.gif" alt="" /> </p> </li> <li> <!--[if gte IE 6]><span></span><![endif]--> <p> <img src="sample02.gif" alt="" /> </p> </li> <li> <!--[if gte IE 6]><span></span><![endif]--> <p> <img src="sample01.gif" alt="" /> </p> </li> <li> <!--[if gte IE 6]><span></span><![endif]--> <p> <img src="sample03.gif" alt="" /> </p> </li> <li> <!--[if gte IE 6]><span></span><![endif]--> <p> <img src="sample01.gif" alt="" /> </p> </li> <li> <!--[if gte IE 6]><span></span><![endif]--> <p> <img src="sample02.gif" alt="" /> </p> </li> </ul> <!-- /.vCenter --></div>

CSSソース(標準)

.vCenter ul { width: 670px; } .vCenter ul li { border: solid 1px #ccc; border-collapse: collapse; float: left; margin-right: 10px; margin-bottom: 15px; width: 122px; } .vCenter ul li p { display: table-cell; text-align: center; vertical-align: middle; width: 122px !important; width: auto; height: 92px !important; height: auto; } .vCenter ul li p img { border: solid 1px #fff; }

CSSソース(IE用)

.vCenter ul { width: 670px; } .vCenter ul li { border: solid 1px #ccc; display: inline; text-align: center; vertical-align: text-top; line-height: 90px; overflow: hidden; width: 122px; height: 92px; zoom: 1; } .vCenter span { display: inline-block; } .vCenter p { vertical-align: middle; display: inline; width: auto; height: auto; zoom: 1; } .vCenter p img { vertical-align: bottom; }