多张图片的垂直居中排版效果

演示效果截图

CSS代码

<style type="text/css">
<!--
a { color:#000;}
.all{ width:600px; height:200px; clear:left}
.box{ width:192px; height:200px; background:#333333;
 display:table-cell;
 vertical-align:middle;
 text-align:center;
*float:left;
 *display: block;
 *font-size: 175px;
 *font-family:Arial;
}
.box img{ padding:4px; border:1px #cdcdcd solid;
vertical-align:middle;}
-->
</style>

HTML代码

<h1>无规则多张图片的垂直居中排版效果</h1>
<h3><a href="http://www.v404.cn">www.v404.cn</a></h3>
<div class="all">
  <div class="box">
  <img src="http://www.v404.cn/Skins/vip/Skin/sk0/img/05.gif"
   width="100" height="23" /></div>
  <div class="box">
  <img src="http://www.v404.cn/Skins/vip/Skin/sk0/img/05.gif"
   width="60" height="60" /></div>
  <div class="box">
  <img src="http://www.v404.cn/Skins/vip/Skin/sk0/img/05.gif"
   width="176" height="104" /></div>
</div>