欢迎来到福编程网，本站提供各种互联网专业知识！

手机版

微信关注

快捷导航: 正则表达式 AJAX相关黑客相关相关技巧 Mysql MsSql MsSql2005 MsSql2008 MariaDB Oracle Access SQLite PostgreSQL MongoDB DB2 Redis 数据库文摘数据库其它 LINUX RedHat/Centos Ubuntu/Debian Fedora Solaris 红旗Linux Unix/BSD 苹果MAC 麒麟系统注册表 BIOS 系统安装系统进程 Fireworks教程

广告商业广告，理性选择

您的位置：网站首页 > 网络编程 > CSS/HTML > 经验交流

CSS List Grid Layout 图片垂直居中

发布时间：2008-05-29　作者：　来源：转载

标签：雪佛兰通用奢华劳斯莱斯旗舰版 64位收藏夹解调器

兼容CompatibleandtestedwithIE6,IE7,Safari2,Safari3,Firefox2,Opera9.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>

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>

<img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="20" alt="image" /> 
        <strong>sodales porta libero.n</strong>

<img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="40" alt="image" /> 
        <strong>sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin</strong>

<img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="60" alt="image" /> 
        <strong>sodales porta libero. Integerdum adipiscing. Proin</strong>

<img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="80" alt="image" /> 
        <strong>sodales porta libero. Integer  adipiscing. Proin</strong>

<img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="100" alt="image" /> 
        <strong>sodalesber Proin</strong>

<img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="110" alt="image" /> 
        <strong>sodales in</strong>

<img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="20" alt="image" /> 
        <strong>sodales porta libero. Integer dignissim sceiquam erat. Nunc eu risus ut dolor bibendum adipiscing. Proin</strong>

<img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="40" alt="image" /> 
        <strong>sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin</strong>

<img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="60" alt="image" /> 
        <strong>sodales porta libero. Integer dignissim scelerisque massa.ndum adipiscing. Proin</strong>

<img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="80" alt="image" /> 
        <strong>sodales porta libero. Integer dignissim at. Nunc eu risus ut dolor bibendum adipiscing. Proin</strong>

<img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="100" alt="image" /> 
        <strong>sodales porta liber Proin</strong>

<img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="110" alt="image" /> 
        <strong>sodales porta liberor bibendum adipiscing. Proin</strong>

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上一篇：IE6网页神奇BUG

下一篇：用css实现图片垂直居中的使用技巧

广告商业广告，理性选择

网站首页

网络编程

数据库

操作系统

平面设计

网站运营

网络安全

电脑相关

手机学院

CSS List Grid Layout 图片垂直居中

相关推荐

文章分类

热门关键词

热门文章

最新更新