// 1 小图标和文字的对齐
// 通过vertical-align 负值
<style media="screen"> ?????.img-class{ ???????width: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{ ???????width: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>
css vertical-align 深入理解
原文地址：https://www.cnblogs.com/ron123/p/9545388.html