假如有一个固定高度的div,如何让里面的一个图片垂直居中?
使用display:table-cell属性就行,直接上代码
html:
<div class="warp"><a href="#"><img src="http://hiphotos.baidu.com/doc/pic/item/bf096b63f6246b6002fdbd30ebf81a4c500fa286.jpg" alt="" data-bd-imgshare-binded="1"></a></div>
css:
div.warp { display: table-cell; vertical-align: middle; height: 148px; background-color:gray; }
显示效果: http://jsfiddle.net/c4fLL7f7/
这样就实现了垂直居中的效果。但是有几个注意事项:
- IE6/IE7不支持display:table-cell,算了别管了,反正IE6/IE7也几乎没什么人用。
- table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute 属性尽量不用同用。
- 设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱 脱的一个td标签元素了。