html:
<ul>
<li>
<div><a href=”#” target=”_blank”><img src=”images/brand/product/1.png” width=”142″ height=”158″ alt=”产品名称一”></a></div>
<span><a href=”#” target=”_blank”>海星鱼缸水族箱 AEC 单拱面 拱面鱼缸</a></span>
<span>免换水 全国包邮 生态鱼缸</span>
<div><a href=”#” target=”_blank”>查看详情</a></div>
</li>
<li>
<div><a href=”#” target=”_blank”><img src=”images/brand/product/2.png” width=”167″ height=”161″ alt=”产品名称二”></a></div>
<span><a href=”#” target=”_blank”>海星鱼缸水族箱 AEC 单拱面 拱面鱼缸</a></span>
<span>免换水 全国包邮 生态鱼缸</span>
<div><a href=”#” target=”_blank”>查看详情</a></div>
</li>
<li>
<div><a href=”#” target=”_blank”><img src=”images/brand/product/3.png” width=”139″ height=”161″ alt=”产品名称三”></a></div>
<span><a href=”#” target=”_blank”>海星鱼缸水族箱 AEC 单拱面 拱面鱼缸</a></span>
<span>免换水 全国包邮 生态鱼缸</span>
<div><a href=”#” target=”_blank”>查看详情</a></div>
</li>
<li>
<div><a href=”#” target=”_blank”><img src=”images/brand/product/4.png” width=”138″ height=”161″ alt=”产品名称四”></a></div>
<span><a href=”#” target=”_blank”>海星鱼缸水族箱 AEC 单拱面 拱面鱼缸</a></span>
<span>免换水 全国包邮 生态鱼缸</span>
<div><a href=”#” target=”_blank”>查看详情</a></div>
</li>
</ul>
css:
.brand_list .pro_list {
float: left;
width: 984px;
overflow: hidden;
}
.pro_list li {
display: block;
float: left;
height: 300px;
width: 210px;
margin-right: 16px;
overflow: hidden;
padding: 0 10px;
text-align: center;
}
.pro_list .thumb {
height: 200px;
width: 200px;
overflow: hidden;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 5px;
}
.pro_list .thumb a {
display: block;
position: static;
*position: absolute;
top: 50%;
}
.pro_list .thumb img {
position: static;
*position: relative;
top: -50%;
left: -50%;
}
css:在IE6的垂直居中有一点小的问题,就是并未绝对的垂直居中,只是近似罢了,但是在其它浏览器中却是没有问题的哈。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/webdev/250799.html