一个DIV下面有一张图片,一段文字,文字可能不止一行,怎么让图片文字垂直居中?

一个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完全无效

阅读 12.2k
4 个回答

图片居中用background-position:center
文字:text-align:center; 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

<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。。。其它浏览器完全通吃!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏