CSS List Grid Layout 图片垂直居中 – CSS/HTML笔记 – CFEI.NET
CSS/HTML，
层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。
来来来......继续开搞CSS/HTML知识的分享。
<!doctype html public '-//w3c//dtd html 4.01//en' 'http://www.w3.org/tr/html4/strict.dtd'>
<html>
<head>
<title>CSS <a href="http://www.cfei.net/archives/tag/list" title="浏览关于“List”的文章" target="_blank" class="tag_link">List</a> <a href="http://www.cfei.net/archives/tag/grid" title="浏览关于“Grid”的文章" target="_blank" class="tag_link">Grid</a> 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>
<h3>List Grid View</h3>
<img src="static/<a href="http://www.cfei.net/archives/tag/css-2" title="浏览关于“css”的文章" target="_blank" class="tag_link">css</a>/01/auikbrw5d2u.jpg" height="20" alt="image" />
<strong>sodales porta libero.n</strong>
<img src="static/css/01/auikbrw5d2u.jpg" height="40" alt="image" />
<strong>sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin</strong>
<img src="static/css/01/auikbrw5d2u.jpg" height="60" alt="image" />
<strong>sodales porta libero. Integerdum adipiscing. Proin</strong>
<img src="static/css/01/auikbrw5d2u.jpg" height="80" alt="image" />
<strong>sodales porta libero. Integer adipiscing. Proin</strong>
<img src="static/css/01/auikbrw5d2u.jpg" height="100" alt="image" />
<strong>sodalesber Proin</strong>
<img src="static/css/01/auikbrw5d2u.jpg" height="110" alt="image" />
<strong>sodales in</strong>
<img src="static/css/01/auikbrw5d2u.jpg" height="20" alt="image" />
<strong>sodales porta libero. Integer dignissim sceiquam erat. Nunc eu risus ut dolor bibendum adipiscing. Proin</strong>
<img src="static/css/01/auikbrw5d2u.jpg" height="40" alt="image" />
<strong>sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin</strong>
<img src="static/css/01/auikbrw5d2u.jpg" height="60" alt="image" />
<strong>sodales porta libero. Integer dignissim scelerisque massa.ndum adipiscing. Proin</strong>
<img src="static/css/01/auikbrw5d2u.jpg" height="80" alt="image" />
<strong>sodales porta libero. Integer dignissim at. Nunc eu risus ut dolor bibendum adipiscing. Proin</strong>
<img src="static/css/01/auikbrw5d2u.jpg" height="100" alt="image" />
<strong>sodales porta liber Proin</strong>
<img src="static/css/01/auikbrw5d2u.jpg" height="110" alt="image" />
<strong>sodales porta liberor bibendum adipiscing. Proin</strong>
</body>
</html>
因为水平有限，难免有疏忽或者不准确的地方，希望大家能够直接指出来，我会及时改正。一切为了知识的分享。
后续会有更多的精彩的内容分享给大家。
支付宝扫一扫
微信扫一扫
