【下载文档:  CSS List Grid Layout 图片垂直居中.txt 】

---

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