先给一张淘宝上的宝贝展示图:
我们看到图片在div中是居中的,那么这是怎么做到的呢。其实这在FF和IE下要有不同的实现方法,下面我们分析一下这个的做法:
HTML:
<div class="photo">
<a href="eg.html">
<img src="eg.jpg">
</a>
</div>
CSS:
.photo {
height: 220px;
padding: 5px;
width: 220px;
}
.photo a {
display: table-cell;
font: 12px/1 Tahoma,Helvetica,Arial;
height: 220px;
text-align: center;
vertical-align: middle;
width: 220px;
*display:block;
*font-family:Arial;
*font-size:191px;
}
class名为photo的这个div的大小是固定的,而图片却有大有小,不能保证图片能全部充满div,所以为了能让用户点击了图片以外但在div之内的范围(padding部分除外)也能跳转到指定的链接上,我们给<a>加了一个和包含它的div相同的宽和高。但<a>属于行内元素,所以给它设置了一个display: table-cell属性,这样设置vertical-align: middle和text-align: center就能使图片居中了。
但在可怜的IE下却没有display: table-cell这个属性,所以在IE下我们只能设置display: block属性了,垂直居中的问题就只能靠font-size和line-height属性来解决了,所以就有了代码中的hack.
我查了下淘宝上的做法,也是按这种方式来做的。
IE6我诅咒你,快快消失吧,哈哈。