首页新闻找找看学习计划

怎么把文字和图片并排垂直居中显示?

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>
复制代码
iMath的主页 iMath | 菜鸟二级 | 园豆:210
提问于:2017-07-13 16:29
< >
分享
所有回答(2)
0

你的图片好像挂掉了~

好来污影后 | 园豆:287 (菜鸟二级) | 2017-07-13 16:40

没有啊

 

支持(0) 反对(0) iMath | 园豆:210 (菜鸟二级) | 2017-07-13 16:42

@iMath: 

你重新上传下试试

支持(0) 反对(0) 好来污影后 | 园豆:287 (菜鸟二级) | 2017-07-13 16:43

@好来污影后: 要是实在不行看这里吧

https://www.zhihu.com/question/62265471

支持(0) 反对(0) iMath | 园豆:210 (菜鸟二级) | 2017-07-13 16:45

@iMath: 用上两个东西就解决了,图片上,display:inline-block; vertical-align: middle;

支持(0) 反对(0) 好来污影后 | 园豆:287 (菜鸟二级) | 2017-07-13 16:48

@好来污影后: 我写成这个,

div>img {display:inline-block;
vertical-align: middle;}

没效果,您可以试试看https://codepen.io/anon/pen/gRQWWB

支持(0) 反对(0) iMath | 园豆:210 (菜鸟二级) | 2017-07-13 16:53

@iMath: 你的文字使用UL标签包裹的,UL也是块元素,所以你可以这样写

如果帮到了你,要粉我一波哦~

div > img { vertical-align: middle; }
div > img, div > ul { display:inline-block; }
支持(1) 反对(0) 好来污影后 | 园豆:287 (菜鸟二级) | 2017-07-13 17:04

@好来污影后: 不错,已粉,O(∩_∩)O哈哈~以后我再向你多多讨教

支持(0) 反对(0) iMath | 园豆:210 (菜鸟二级) | 2017-07-13 17:19

@好来污影后: 

用上flex布局之后简直就是life-changing

#promotion{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
支持(0) 反对(0) iMath | 园豆:210 (菜鸟二级) | 2017-07-17 19:00
1

可以用flex布局,实现这种效果很方便的

与阳光握手言和 | 园豆:373 (菜鸟二级) | 2017-07-13 17:14

非常棒,用上flex布局之后简直就是life-changing

#promotion{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

 

支持(0) 反对(0) iMath | 园豆:210 (菜鸟二级) | 2017-07-17 18:59

@iMath: flex确实很方便,但是不要忘了兼容写法

支持(0) 反对(0) 与阳光握手言和 | 园豆:373 (菜鸟二级) | 2017-07-17 19:27

@与阳光握手言和: 要加兼容写法的话代码量双倍啊,不写兼容问题大吗?普遍吗?

支持(0) 反对(0) iMath | 园豆:210 (菜鸟二级) | 2017-07-17 20:55

@iMath: 如果你只是要支持一些主流浏览器的话可以不加,但是我觉得最好要加上,如果后期一旦出现问题修改的话,你得挨个文件去添加,很麻烦

支持(0) 反对(0) 与阳光握手言和 | 园豆:373 (菜鸟二级) | 2017-07-18 10:52

@与阳光握手言和: 你的意思是说以其后面出问题了再去加上还不如一开始写的时候就加上,对吧?

支持(0) 反对(0) iMath | 园豆:210 (菜鸟二级) | 2017-07-18 12:56

@iMath: 是的

支持(0) 反对(0) 与阳光握手言和 | 园豆:373 (菜鸟二级) | 2017-07-18 13:14

@与阳光握手言和: 多谢大哥!

支持(0) 反对(0) iMath | 园豆:210 (菜鸟二级) | 2017-07-18 21:48
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册