【html css】DIV+CSS如何让图片和文字在同一行
前端react项目要写一个图标放在标题后面。
在div+css布局中，如果一行(或一个DIV)内容中有图片和文字的话，图片和文字往往会一个在上一个在下。
目前使用3种方法实现，我用百度图片作为示例。
1.添加CSS属性
vertical-align:middle;
<style>a img {border: none;}.testdiv * {vertical-align: middle;}</style><div class="testdiv"><a href="/"><img src="/img/flexible/logo/pc/result.png" alt="这里是图片" /></a><span>这里是文字,看看文字对齐了没</span></div>
2.div嵌套
将图片和文字分别套上一个div，就可以利用 margin 熟悉任意定位了
<style>a img {border: none;}.testIMG {float: left;display: inline;margin-top: 0;margin-left: 5px;}.testTXT {float: left;display: inline;margin-top: 20;margin-left: 5px;}</style><div class="testdiv"><div class="testIMG"><a href="/"><imgsrc="/img/flexible/logo/pc/result.png"alt="这里是图片"/></a></div><div class="testTXT"><span>这里是文字,看看文字对齐了没</span></div></div>
3.把图片作为背景
如果你的图片只是用来作为小图标放在文字的左侧，那就推荐用这个方法，图片设置成文字的背景，不循环，定位在左侧上下居中，文字向左padding图片的宽度加几个像素。
<style>a img {border: none}.testTXT {height: 68px;line-height: 60px;padding-left: 220px;background: url(/img/flexible/logo/pc/result.png) no-repeat left center}</style><div class="testdiv"><div class="testTXT"><span>这里是文字,看看文字对齐了没</span></div></div>
