一个DIV下面有一张图片,一段文字,文字可能不止一行,怎么让图片文字垂直居中?
<div class="banner_same le">
<img src="images/le_bg.png" alt=""/>
<a href="#">Leader<br/>boards</a>
</div>
div的样式:banner_same{border:2px solid #bdcfdc;background:#0a1c29;height:85px;cursor:pointer;}
图片的宽度为40px,高度不确定,怎样让图片跟文字垂直居中,
加一个vdisplay: table-cell; ,vertical-align:middle完全无效
试一下这一个,只修改CSS
添加
.banner_same {white-space:pre-line;text-align:center;vertical-align:middle;display:table-cell;width:900px}
就是按照你的思路增加了,white-space:pre-line
图片居中用background-position:center
文字:text-align:center; vertical-align:middle;
http://jsfiddle.net/4Pq2A/2/
写了一个js版的,应该是所有浏览器都能兼容吧,手机的要能运行js的话问题也应该不大?
http://jsfiddle.net/LGtTv/3/
<style>
body,p{margin:0; padding:0;}
.div{position:relative; padding-left:100px; width:300px; background-color:#CCC; min-height:100px;}
.div img{position:absolute; top:0; bottom:0; left:0; margin:auto;}
</style>
<div class="div">
<img src="http://ubmcmm.baidustatic.com/media/v1/0f000nYQaO_UI6DhjPksj6.png" width="100" height="100">
<p>我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字我是一段超长文字文字</p>
</div>
我讨厌兼容IE6/7。。。其它浏览器完全通吃!