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