怎么把文字和图片并排垂直居中显示？
0
[待解决问题]
我想要的是这种效果——文字和图片并排垂直居中显示
我的代码如下，请大家指教下该怎么写，谢谢
<div id="promotion"> <img src="http://files.cnblogs.com/files/iMath/qrcode_for_gh_37c790b9caf3_258.bmp"> <ul id="promotionText"> <li>持续获取最新高数讲解资料，请关注微信公众号：高数变简单</li> <li>可 <a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=c1ce665a5146d914888af4968e96cbe969d62cf796980f4d68284f03c0e8cc70"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="Coursera" title="Coursera"></a>187255889 讨论本博客里的数学问题</li> <li><a id="donation" target="_blank" href="http://www.cnblogs.com/iMath/p/7109930.html">您可以这样帮助我</a></li> </ul> </div>
所有回答(2)
0
你的图片好像挂掉了~
没有啊
@iMath: 
你重新上传下试试
@好来污影后: 要是实在不行看这里吧
https://www.zhihu.com/question/62265471
@iMath: 用上两个东西就解决了，图片上，display：inline-block; vertical-align: middle;
@好来污影后: 我写成这个，
div>img {display:inline-block;
vertical-align: middle;}
没效果，您可以试试看https://codepen.io/anon/pen/gRQWWB
@iMath: 你的文字使用UL标签包裹的，UL也是块元素，所以你可以这样写
如果帮到了你，要粉我一波哦~
div > img { vertical-align: middle; } div > img, div > ul { display:inline-block; }
@好来污影后: 不错，已粉，O(∩_∩)O哈哈~以后我再向你多多讨教
@好来污影后:
用上flex布局之后简直就是life-changing
#promotion{ display: flex; align-items: center; flex-wrap: wrap; }
1
可以用flex布局，实现这种效果很方便的
非常棒，用上flex布局之后简直就是life-changing
#promotion{ display: flex; align-items: center; flex-wrap: wrap; }
@iMath: flex确实很方便，但是不要忘了兼容写法
@与阳光握手言和: 要加兼容写法的话代码量双倍啊，不写兼容问题大吗？普遍吗？
@iMath: 如果你只是要支持一些主流浏览器的话可以不加，但是我觉得最好要加上，如果后期一旦出现问题修改的话，你得挨个文件去添加，很麻烦
@与阳光握手言和: 你的意思是说以其后面出问题了再去加上还不如一开始写的时候就加上，对吧？
@iMath: 是的
@与阳光握手言和: 多谢大哥！
