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

发布于 2022-08-28 11:47:10 字数 441 浏览 10 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

睫毛溺水了 2022-09-04 11:47:10

http://jsfiddle.net/4Pq2A/2/

写了一个js版的,应该是所有浏览器都能兼容吧,手机的要能运行js的话问题也应该不大?

http://jsfiddle.net/LGtTv/3/

泡沫很甜 2022-09-04 11:47:10

图片居中用background-position:center
文字:text-align:center; vertical-align:middle;

无戏配角 2022-09-04 11:47:10

试一下这一个,只修改CSS

添加
.banner_same {white-space:pre-line;text-align:center;vertical-align:middle;display:table-cell;width:900px}

就是按照你的思路增加了,white-space:pre-line

有木有妳兜一样 2022-09-04 11:47:10
<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。。。其它浏览器完全通吃!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文