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需刷新才能执行]