CSS List Grid Layout 图片垂直居中

所属分类：网络编程 / CSS/HTML 阅读数： 732

收藏 0赞 0分享

<!doctype html public '-//w3c//dtd html 4.01//en' 'http://www.w3.org/tr/html4/strict.dtd'> <html> <head> <title>CSS List Grid View Layout</title>  </head> <body> <h1>CSS List Grid Layout</h1> <p>Compatible and tested with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21</p> <div class="img-grid"> <h3>List Grid View</h3> <ul>               <li>         <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="20" alt="image" /></a>         <strong><a href="#">sodales porta libero.n</a></strong>     </li>     <li>         <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="40" alt="image" /></a>         <strong><a href="#">sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin</a></strong>     </li>     <li>         <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="60" alt="image" /></a>         <strong><a href="#">sodales porta libero. Integerdum adipiscing. Proin</a></strong>     </li>     <li>         <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="80" alt="image" /></a>         <strong><a href="#">sodales porta libero. Integer  adipiscing. Proin</a></strong>     </li>     <li>         <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="100" alt="image" /></a>         <strong><a href="#">sodalesber Proin</a></strong>     </li>     <li>         <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="110" alt="image" /></a>         <strong><a href="#">sodales in</a></strong>     </li>         <li>         <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="20" alt="image" /></a>         <strong><a href="#">sodales porta libero. Integer dignissim sceiquam erat. Nunc eu risus ut dolor bibendum adipiscing. Proin</a></strong>     </li>     <li>         <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="40" alt="image" /></a>         <strong><a href="#">sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin</a></strong>     </li>     <li>         <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="60" alt="image" /></a>         <strong><a href="#">sodales porta libero. Integer dignissim scelerisque massa.ndum adipiscing. Proin</a></strong>     </li>     <li>         <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="80" alt="image" /></a>         <strong><a href="#">sodales porta libero. Integer dignissim at. Nunc eu risus ut dolor bibendum adipiscing. Proin</a></strong>     </li>     <li>         <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="100" alt="image" /></a>         <strong><a href="#">sodales porta liber Proin</a></strong>     </li>     <li>         <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="110" alt="image" /></a>         <strong><a href="#">sodales porta liberor bibendum adipiscing. Proin</a></strong>     </li>     </ul> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

CSS List Grid Layout 图片垂直居中

推荐深入理解css中的position定位和z-index属性

不错的10个你未必知道的CSS技巧

一点小小的创意css鼠标放上去则显示电话号码

固定表格的高度超过指定高度就隐藏的方法

推荐个Css的filter常用滤波器属性及语句大全

淘宝段正淳的css笔记大全第1/4页

CSS实现的一个图片放大展示的一种思路

用css滤镜实现的文字描边效果的代码

用css实现的带阴影的表格效果的代码

又一实用的常用CSS缩写语法收集

网络赚钱

站长故事