CSS List Grid Layout 图片垂直居中- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS List Grid Layout 图片垂直居中

CSS样式表: 字符不会撑大表格的常见css样式; 表格高级使用技巧_把表格进行到底(必看); 网页中Span和Div的区别; 在IE与FF中如何居中的css写法; javascript横排竖排标准选项卡效果代码; 解决ie动态修改link样式，import css不刷新的问题; css不用图片美化按钮; 网页打开新窗口target=_blank不符合标准; Javascript的匿名函数讲解; Firefox2中输入框丢失光标bug的解决方法; Firefox返回时Iframe的显示Bug的解决方法; 使网页成黑白色调的滤镜; CSS学习笔记Padding 属性中参数的定义与使用; 无限级CSS树形菜单 Ver2.0; css多行多列的新闻模式; Internet Explorer 8 beta 中文版与IE7共存的解决方法; CSS对Web页面载入效率的影响分析总结; 巧妙地使用CSS选择器; 去除链接元素的虚线框兼容IE7、IE6、FF; DIV border边框显示不完全问题的解决方法

No. « ‹ 45 46 47 48 › »

技术文章搜索

关键字

CSS样式表中的 CSS List Grid Layout 图片垂直居中

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 128 ::

收藏到网摘: n/a

用css实现图片垂直居中的使用技巧 IE6网页神奇BUG

兼容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>
Compatible and tested with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21
<div class="img-grid">
<h3>List Grid View</h3>
<ul> <li> <img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="20" alt="image" /> <strong><a href="#">sodales porta libero.n</a></strong> </li> <li> <img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="40" alt="image" /> <strong><a href="#">sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin</a></strong> </li> <li> <img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="60" alt="image" /> <strong><a href="#">sodales porta libero. Integerdum adipiscing. Proin</a></strong> </li> <li> <img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="80" alt="image" /> <strong><a href="#">sodales porta libero. Integer adipiscing. Proin</a></strong> </li> <li> <img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="100" alt="image" /> <strong><a href="#">sodalesber Proin</a></strong> </li> <li> <img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="110" alt="image" /> <strong><a href="#">sodales in</a></strong> </li> <li> <img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="20" alt="image" /> <strong><a href="#">sodales porta libero. Integer dignissim sceiquam erat. Nunc eu risus ut dolor bibendum adipiscing. Proin</a></strong> </li> <li> <img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="40" alt="image" /> <strong><a href="#">sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin</a></strong> </li> <li> <img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="60" alt="image" /> <strong><a href="#">sodales porta libero. Integer dignissim scelerisque massa.ndum adipiscing. Proin</a></strong> </li> <li> <img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="80" alt="image" /> <strong><a href="#">sodales porta libero. Integer dignissim at. Nunc eu risus ut dolor bibendum adipiscing. Proin</a></strong> </li> <li> <img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="100" alt="image" /> <strong><a href="#">sodales porta liber Proin</a></strong> </li> <li> <img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="110" alt="image" /> <strong><a href="#">sodales porta liberor bibendum adipiscing. Proin</a></strong> </li>
</ul>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

用css实现图片垂直居中的使用技巧 IE6网页神奇BUG

CSS样式表 中的 CSS List Grid Layout 图片垂直居中

评论 (0) All

CSS样式表中的 CSS List Grid Layout 图片垂直居中