div+css垂直居中显示
效果图:
1.兼容到ie7+
HTML:
<div class="nav">
<div class="cell">
<div class="cell_ct">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
</div>
</div>
</div>
</span>
CSS:
.nav{height:100%; width:151px; top:0px; right:0px; display:table; position:fixed;}
.nav .cell{display:table-cell;zoom:1; vertical-align:middle;position:relative;*top:50%;}
.nav .cell .cell_ct{*top:-50%; position:relative}
.nav .cell .cell_ct img{margin-top:3px; display:block;}</span>
代码下载
http://download.csdn.net/download/u010127996/9581987
说明:若只用兼容到ie8,使用display:table-cell;和display:table就可以了
HTML:
<div class="nav">
<div class="cell">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
</div>
</div>
CSS:
.nav{height:100%; width:151px; top:0px; right:0px; display:table; position:fixed;}
.nav .cell{display:table-cell;zoom:1; vertical-align:middle;}
代码下载
http://download.csdn.net/download/u010127996/9581871