CSS List Grid Layout 图片垂直居中

更新时间：2008年05月29日 20:08:07 作者：

兼容Compatible and tested with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21的图片垂直居中效果代码

<!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> <style> 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; } </style> </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文字垂直居中的8种方法
CSS可以轻易实现文字的水平居中，但有时我们需要文字垂直居中，除了表格可以实现这种CSS文字垂直居中以外，还有其它几种方法可以做到
2020-01-01
CSS定位中Positoin、absolute、Relative的一些研究
用Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Positoin属性等。
2008-10-10
跨浏览器的实践:position:fixed 层的固定定位
一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之
2008-11-11
css滤镜实现页面灰色黑白色效果代码
为方便站点哀悼，特提供素装代码，以表哀悼。以下为全站CSS代码。
2008-05-05
滚动条效果
滚动条效果...
2006-11-11
css文本框与按钮美化效果代码
CSS表单美化之文本框与按钮一例
2008-08-08
三个不常见的 HTML5 实用新特性简介
都已经到了 2014 年了，再来说 HTML5 的新特性，实在是够晚了，不过这几个在介绍 HTML5 的书上很少见到，但又可以方便的应用在自己的网站上，所以特地来介绍一下
2014-03-03
被人遗忘的html tags
被人遗忘的html tags...
2007-02-02
常用CSS集合
常用CSS集合...
2007-02-02
关于《精通css》之几个不错的注意事项
这篇文章主要介绍了关于《精通css》之几个不错的注意事项,需要的朋友可以参考下
2007-03-03

CSS List Grid Layout 图片垂直居中

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具