CSSListGridLayout图片垂直居中_经验交流

来源：动视网责编：小采时间：2020-11-27 18:55:21

CSSListGridLayout图片垂直居中_经验交流

CSSListGridLayout图片垂直居中_经验交流: CSS List Grid View Layout 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; margi

推荐度：

点击下载本文 文档为doc格式

导读CSSListGridLayout图片垂直居中_经验交流: CSS List Grid View Layout 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; margi

<html> 
<head> 
<title>CSS List Grid View Layout</title>

}

.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> 
<h2>CSS List Grid Layout</h2> 
<p>Compatible and tested with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21</p>

<li> 
 <img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/424905397_d0ab1d8eea_m.jpg" height="20" image" /> 
 sodales porta libero.n 
 </li>

</body> 
</html>

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

CSSListGridLayout图片垂直居中_经验交流

推荐度：

点击下载本文 文档为doc格式

标签：图片 css 垂直居中

热门焦点

CSSListGridLayout图片垂直居中_经验交流

CSSListGridLayout图片垂直居中_经验交流

CSSListGridLayout图片垂直居中_经验交流

最新推荐

猜你喜欢

热门推荐