// 1 小图标和文字的对齐
// 通过vertical-align 负值
<style media="screen">
.img-class{
20px;
height: 20px;
vertical-align:-10px;
}
</style>
<div>
<img class="img-class" src="http://www.17sucai.com/preview/1268063/2018-08-02/Friends/images/icon-vip1.png" alt="">
web前端，就职于腾讯ISUX上海设计中心，喜欢卖萌打杂，同事都叫我张老师，(*^__^*) 嘻嘻……
</div>
//2.不定尺寸图片或多行文字的垂直居中
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>不定尺寸图片或多行文字的垂直居中</title>
<!--
1. 主体元素inline-block化
2. 0宽度100%高度辅助元素；
3. vertical-align:middle
-->
<style media="screen">
.container{
height: 200px;
border:1px solid #000;
background: #eee;
text-align: center;
}
.img-class{
100px;
height: 100px;
}
img{vertical-align: middle;}
span{ vertical-align: middle;}
i{display: inline-block; height: 100%; vertical-align: middle;}
</style>
</head>
<body>
<div class="container">
<img class="img-class" src="http://www.17sucai.com/preview/1268063/2018-08-02/Friends/images/icon-vip1.png" alt="">
<span>web前端，就职于腾讯ISUX上</span>
<i></i>
</div>
</body>
</html>
// text-top 和text-bottom的区别
1.vertical-align:text-top;
盒子的顶部和父级content area的顶部的对齐
2.vertical-align:text-bottom;
盒子的底部和父级content area的底部对齐