把img的padding调大的时候 发现文字和图片不对齐 怎么vertical-align也无效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网</title>
<style type="text/css">
.content {
width: 810px;
margin: 0 auto;
font-family: "Microsoft Sans Serif";
line-height: 24px;
padding: 5px;
border: lightgray 1px solid;
}
.img01,.img02{
padding: 5px;
}
.img01{
float: left;
}
.img02{
float: right;
}
</style>
</head>
<body>
<div class="content">
<img src="http://img1.sycdn.imooc.com/climg//59c8742e0001bc9607120172.jpg" alt="" class="img01">
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。<br/><br/>
慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。<br/><br/>
4月2日，国内首个IT技能学习类应用——慕课网3.1.0版本在应用宝首发。据了解，在此次上线的版本中，慕课网新增了课程历史记录、相关课程推荐等四大功能，为用户营造更加丰富的移动端IT学习体验。<br/><br/>
<img src="http://img1.sycdn.imooc.com/climg//59c874560001779307120172.jpg" alt="" class="img02">
老师来自于各大IT公司重要技术岗位，拥有丰富的实战经验。语言平实、通俗易懂，更接地气，传授最有价值的经验之谈。课程内容注重实用性，不仅让学员通过学习能够做出产品，而且学习过程中掌握的方法技巧在实际工作中用得上，能够切实帮助学员提升工作技能。<br/><br/>
慕课网的绝大多数课程都经过了专业的后期制作，为课程内容匹配了个性化的视觉效果，帮助学员更好地理解课程内容，增加学习的乐趣。
</div>
</body>
</html>
正在回答
vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,
图文混排的原理是图片使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围,所以不能通过设置vertical-align属性实现效果.
目前同学的代码已经实现了习题要求效果哦~棒棒的
祝学习愉快!
第一张图片只设置margin-right，第二张图片只设置margin-left,应该就行了
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星