<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>
</ul>
CSS Code
CSS Code复制内容到剪贴板
<style type="text/css">
.imgWrap li{
width: 219px;
height: 219px;
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
list-style: none;
text-align: center;
font-size: 0;
}
.imgWrap a {
display: block;
height: 100%;
background: #ffa url(images/gridBg.gif) repeat center;
}
.imgWrap a:hover {
background-color: green;
}
.imgWrap span {
display: inline-block;/*将行内元素改变为行内块元素显示*/
width: 1px;/*实现ＩＥ下可读效果*/
height: 100%;/*使用元素高度和图片容器高度一样*/
vertical-align: middle;/*垂直对齐*/
}
.imgWrap img {
vertical-align: middle;
}
</style>
效果
3、display:table模拟表格实现图片垂直居中
接下来要说的这种方法是结构有点复杂，而且在IE6-7事要配合hack来产现。这个方法就是模拟表格的形式来实现图片垂直居中的效果。
表格大家都知道，他有行（table-row）单元格（table-cell），众所周知，表格单元格中“vertical-align: middle”能让元素垂直居中，那么下面这个实例就是利用这种原理来制作的，一起来看代码
HTML Markup
XML/HTML Code复制内容到剪贴板
<ul class="imgWrap clearfix">
<li>
<div class="table">
<div class="tableCell">
<a href="#" class="imgBox"><img src="images/img1.jpg" alt="" /></a>
