CSS List Grid Layout 图片垂直居中

CSS List Grid View Layout body{ font-family:Arial; text-align:center; } p{ } .img-grid{ width:603px; margin:auto; overflow:hidden; position:relative; border:solid 20px #CCCCCC; } .img-grid h3{ padding:0 0 12px 0; background:#ccc; margin:0; font:normal normal bold 3em/normal "Georgia"; letter-spacing:-0.1em; text-align:center; } .img-grid ul{ list-style-type:none; margin:-1px 0 0 -1px; padding:0; width:100%; border-width:0px 1px 0 0; position:relative; } .img-grid li{ zoom:1; list-style-type:none; margin:0; padding:0; vertical-align:middle; width:200px; padding:0 0 30px 0; text-align:center; position:relative; border:solid 1px #dedede; border-top-color:#CCCCCC; margin:-1px -1px 0 0; border-width:1px 0 0px 1px; float:left; display:inline; font:150px/normal "Times new roman"; *padding:0; *font-size:180px; } .img-grid li img { vertical-align:middle; background:#fff; font-size:12px; padding:2px; border:solid 1px #555; } .img-grid li a:hover{ text-indent:0;/*IE6 need this to trigger :hover*/ } .img-grid li a:hover img{ padding:1px; border:solid 2px #336699; } .img-grid li strong{ display:block; font:small/1.1 Arial; background:#fff; position:absolute; bottom:0; left:0; width:100%; } .img-grid li strong a{ display:block; padding:8px 4px; color:#336699; text-decoration:none; zoom:1; } .img-grid li strong a:hover{ text-decoration:underline; } CSS List Grid Layout

Compatible and tested with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21

List Grid View sodales porta libero.n sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin sodales porta libero. Integerdum adipiscing. Proin sodales porta libero. Integer adipiscing. Proin sodalesber Proin sodales in sodales porta libero. Integer dignissim sceiquam erat. Nunc eu risus ut dolor bibendum adipiscing. Proin sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin sodales porta libero. Integer dignissim scelerisque massa.ndum adipiscing. Proin sodales porta libero. Integer dignissim at. Nunc eu risus ut dolor bibendum adipiscing. Proin sodales porta liber Proin sodales porta liberor bibendum adipiscing. Proin
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]