Images CSS solution vertically centered!
Html:
<ul>
<li>
<div><a href=”#” target=”_blank”><img src=”images/brand/product/1.png” width=”142″ height=”158″ alt=”Product name one”></a></div>
<span><a href=”#” target=”_blank”>Starfish tank aquarium aec Single arched Arched fish tank</a></span>
<span>Water-free national free shipping ecological fish tank</span>
<div><a href=”#” target=”_blank”>View details</a></div>
</li>
<li>
<div><a href=”#” target=”_blank”><img src=”images/brand/product/2.png” width=”167″ height=”161″ alt=”Product name two”></a></div>
<span><a href=”#” target=”_blank”>Starfish tank aquarium aec Single arched Arched fish tank</a></span>
<span>Water-free national free shipping ecological fish tank</span>
<div><a href=”#” target=”_blank”>View details</a></div>
</li>
<li>
<div><a href=”#” target=”_blank”><img src=”images/brand/product/3.png” width=”139″ height=”161″ alt=”Product name three”></a></div>
<span><a href=”#” target=”_blank”>Starfish tank aquarium aec Single arched Arched fish tank</a></span>
<span>Water-free national free shipping ecological fish tank</span>
<div><a href=”#” target=”_blank”>View details</a></div>
</li>
<li>
<div><a href=”#” target=”_blank”><img src=”images/brand/product/4.png” width=”138″ height=”161″ alt=”Product name four”></a></div>
<span><a href=”#” target=”_blank”>Starfish tank aquarium aec Single arched Arched fish tank</a></span>
<span>Water-free national free shipping ecological fish tank</span>
<div><a href=”#” target=”_blank”>View details</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: There is a small problem in the vertical centering of IE6, that is, there is no absolute vertical centering, but it is just similar, but there is no problem in other browsers.