首页 > 全部文章, 学习笔记 > div+css 图片垂直居中解决办法

div+css 图片垂直居中解决办法

一个简单的问题实现在div+css中实现起来可没有那么轻松,参考网上找到的一些资料,找到了一个相对比较简单,而且效果还不错的方案,如下:

html结构很简单如下

<div class=”img_wrap”><img src =”http://www.baidu.com/img/baidu_logo.gif” /></div>

css样式

.img_wrap{/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
text-align:center;
*display: block;
*font-size: 131px;/*约为高度的0.873,150*0.873 约为131*/
width:150px;
height:150px;
border: 1px solid #ccc;}
.img_wrap img{vertical-align:middle;}

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.
click to change 看不清?点击换一张!